SpringBoot之 Layui文件上传（可查看预览）

1.、导入layui css、js

<link th:href="@{/lib/layui/css/layui.css}">
<script th:src="@{/lib/layui/layui.all.js}" charset="utf-8"></script>

2、Jar:用于文件上传

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

3.html

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>预览</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>

4、Js:

layui.use(['upload','layer'], function(){
    var $ = layui.jquery,
        layer = layui.layer//独立版的layer无需执行这一句
        ,upload = layui.upload;
    //多文件列表示例
    var demoListView = $('#demoList')
        ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: 'http://localhost:8080/upload2' //改成您自己的上传接口
        ,accept: 'file'
        ,multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">'
                    ,'<td>'+ file.name +'</td>'
                    ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                    ,'<td>等待上传</td>'
                    ,'<td>'
                    ,'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'
                    ,'</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-xs 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();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                demoListView.append(tr);
            });
        }
        ,done: function(res, index, upload){
            alert(res.code)
            if(res.code==0){ //上传成功,这里的code为后台响应的code
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');

                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }
            this.error(index, upload);
        }
        ,error: function(index, upload){
            var tr = demoListView.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'); //显示重传
        }
    });
//由于是动态添加，所以要先找到这这节点，在对其进行操作
    $("#demoList").on("click", 'img', function(){

        var imgSrc=$(this).attr('src');
        var alt=$(this).attr('alt');
        layer.open({
            type:1
            ,title:false
            ,closeBtn:0
            ,skin:'layui-layer-nobg'
            ,shadeClose:true
            ,content:'<img  src="'+imgSrc+'" height="400px"; width="100%";/>'
            ,scrollbar:false
        })
    });
});

5、后台代码：

@RequestMapping("/upload2")
@ResponseBody
public Map  fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request)  {
    //上传路径保存设置
    String path = request.getServletContext().getRealPath("/upload");
    File realPath = new File(path);
    if (!realPath.exists()){
        realPath.mkdir();
    }
    //上传文件地址
    System.out.println("上传文件保存地址："+realPath);
    //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
    HashMap<String, Object> map = new HashMap<String, Object>();
    try {
        file.transferTo(new File(realPath +"/"+ file.getOriginalFilename()));
        map.put("msg","成功");
        map.put("code","0");
    } catch (IOException e) {
        e.printStackTrace();
        map.put("msg","失败");
        map.put("code","1");
    }
    return map;
}