layui上传图片

最新推荐文章于 2024-06-10 23:36:26 发布

Bronna

最新推荐文章于 2024-06-10 23:36:26 发布

阅读量6.2k

点赞数

分类专栏： javaweb java layui 文章标签： layui

本文链接：https://blog.csdn.net/Bronna/article/details/78810428

版权

javaweb 同时被 3 个专栏收录

12 篇文章 1 订阅

订阅专栏

java

5 篇文章 0 订阅

订阅专栏

layui

2 篇文章 0 订阅

订阅专栏

注：本示例上传图片，设计数据库的部分未展示，如需向数据库保存图片URL只需在controller中code=0；后调用存储路径的接口即可
一、controller代码

@RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
    public void uploadImg(HttpSession session, HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        MultipartFile mf = null;
        File mff = null;
        int code = -1;
        if (!(request instanceof MultipartHttpServletRequest)) {
            String errorMsg = "your post form is not support ENCTYPE='multipart/form-data' ";
            log.error(errorMsg);
            throw new RuntimeException(errorMsg);
        }

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        List<MultipartFile> multipartFiles = multipartRequest.getFiles("file");
        if (null != multipartFiles && multipartFiles.size() > 0) {
            for (int i = 0; i < multipartFiles.size(); i++) {
                mf = multipartFiles.get(i);
                String originalFilename = mf.getOriginalFilename();// 图片名
                String realPath = "D:/MLT_ZNJZ/Intelligent/exlborrow/" + originalFilename;// 全路径
                File source = new File(realPath);
                if (source.exists()) {
                    mff = source;
                    code = 1;
                } else {
                    try {
                        mf.transferTo(source);
                        mff = source;
                        code = 0;

                        log.debug("Upload file " + source.getAbsoluteFile() + " Success!");
                    } catch (Exception e) {
                        log.error("Upload file " + source.getAbsoluteFile() + " Error!" + e.getMessage());
                        // throw new RuntimeException("Upload file " +
                        // source.getAbsoluteFile() + " Error!" +
                        // e.getMessage());
                    }
                }
            }
        }
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("code", code);
        result.put("mff", mff);
        writeJSON(response, result);
    }

二、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/layui/css/layui.css"/>
</head>
<body style="padding:15px;">
        <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
        <button type="button" class="layui-btn" id="testListAction" style="position: absolute;right: 15px;">开始上传</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>
</body>
<!-- 引入js -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/layui/layui.js"></script>
<script type="text/javascript">
var folderUrl="D:/MLT_ZNJZ/Intelligent/exlborrow";
//上传图片
layui.use('upload', function(){
    var $ = layui.jquery,upload = layui.upload;
    var files =null;

    upload.render({
        elem : '#testList',
        url : 'borrow/uploadImg',
        multiple : true,
        auto : false,
        accept: 'file', //普通文件
        exts: 'jpg|png', //只允许上传压缩文件
        bindAction : '#testListAction',
        choose : function(obj) {
            files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file,result) {
                var tr = $([
                        '<tr id="upload-'+ index +'">',
                        '<td>' + file.name + '</td>',
                        '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>',
                        '<td>等待上传</td>',
                        '<td>',
                        '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>',
                        '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>',
                        '</td>', '</tr>']
                        .join(''));
                //单个重传
                tr.find('.demo-reload').on('click',function() {obj.upload(index,file);});
                //删除
                tr.find('.demo-delete').on('click',function() {delete files[index];tr.remove();});
                $('#demoList').append(tr);
            });
        },
        done : function(res, index, upload) {
            if (res.code == 0) { //上传成功
                var tr = $('#demoList').find('tr#upload-' + index), 
                tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html('');
                delete files[index];//删除队列已经上传成功的照片
                //上传成功调用方法显示 用户信息和图片
                parent.location.reload();
                return;
            }else if (res.code == 1) { //文件已经存在
                var tr = $('#demoList').find('tr#upload-' + index), 
                tds = tr.children();
                tds.eq(2).html('<span style="color: #ff9800;">文件名已存在</span>');
                tds.eq(3).html('');
                return;
            }
            this.error(index, upload);
        },
        error : function(index, upload) {
            var tr = $('#demoList').find('tr#upload-'+ index), tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });
});

三、效果图

1.运行后页面如下图
这里写图片描述

2.点击选择文件按钮，选择一张图片

3.点击开始上传，上传成功后如下图
这里写图片描述

Bronna

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
layui上传图片

一、controller代码@RequestMapping(value = "/uploadImg", method = RequestMethod.POST) public void uploadImg(HttpSession session, HttpServletRequest request, HttpServletResponse response) thr
复制链接

扫一扫

专栏目录