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

1.、导入layui css、js

2、Jar:用于文件上传

    commons-fileupload
    commons-fileupload
    1.3.3

3.html

    选择多文件
    

        

            

            
文件名
                
大小
                
状态
                
预览
                
操作
            
            

        
    
    开始上传

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 = $([''
                    ,''+ file.name +''
                    ,''+ (file.size/1024).toFixed(1) +'kb'
                    ,'等待上传'
                    ,''
                    ,''
                    ,''
                    ,''
                    ,'重传'
                    ,'删除'
                    ,''
                    ,''].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('上传成功');

                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('上传失败');
            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:''
            ,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 map = new HashMap();
    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;
}