SpringMVC +layui 实现多文件上传，附加进度条

首先在进行文件上传操作的时候，你得对layui 中文件上传的一些参数先了解一下，不要网上复制粘贴，起码你要对layui 文件上传的必备参数做一些大致掌握，也是自己学习。

（1）

首先你得引入layui 必备文件，

（2）在你的html 文件中引入 layui.js, layui.css样式即可，layui是一个ui框架，对一些组件的封装，拿来即可使用，

（3）

进入主题，直接上代码，

file.html

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>高级应用：制作一个多文件列表</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="fileList">选择多文件</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr>
                <th>图片</th>
                <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="fileListAction">开始上传</button>
</div>

file.js

这里需要注意一下，在文件上传附加的进度条的实现需要替换layui里面的upload.js文件 原有的layui 没有结合这部分功能，这里的upload.js 是别人修改好的，必须替换，不然进度条加载不出来

链接：https://pan.baidu.com/s/1Z8j_9aUlSBFlfFbXjHefkg
提取码：6aub

layui.use(['table','form','layer','jquery','upload','element'],function (){


    let table=layui.table;
    let form=layui.form;
    let layer=layui.layer;
    let $=layui.$;
    let element=layui.element;
    let upload=layui.upload;


    //上传
    //多文件列表示例
    //创建监听函数
    var xhrOnProgress=function(fun) {
        xhrOnProgress.onprogress = fun; //绑定监听
        //使用闭包实现监听绑
        return function() {
            //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
            var xhr = $.ajaxSettings.xhr();
            //判断监听函数是否为函数
            if (typeof xhrOnProgress.onprogress !== 'function')
                return xhr;
            //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
            if (xhrOnProgress.onprogress && xhr.upload) {
                xhr.upload.onprogress = xhrOnProgress.onprogress;
            }
            return xhr;
        }
    }
    var files;
    //多文件列表示例
    var demoListView = $('#demoList')
        , uploadListIns = upload.render({
            elem: '#fileList'
            , size: 102400 //限制文件大小，单位 KB
            , exts: 'zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg' //只允许上传压缩文件
            , url: '/file/many/upload'
            , type:'post'
            , data:{}
            , dataType:'json'
            , accept: 'file'
            , multiple: true
            , auto : false   //关闭文件自动上传
            , bindAction: '#fileListAction'
            , xhr: xhrOnProgress
            , progress: function (value) {//上传进度回调 value进度值
                element.progress('demoList', value + '%')//设置页面进度条
            }, xhr: function (index, e) {
                var percent = e.loaded / e.total;//计算百分比
                percent = parseFloat(percent.toFixed(2));
                element.progress('progress_' + index + '', percent * 100 + '%');
                console.log("-----" + percent);
            }
            // , data: JSON.stringify(Param)
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $([
                        '<tr id="upload-' + index + '">'
                        ,'<td>'+'<img src="'+ result +'" alt="'+ file.name +'" >'+'</td>'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td><div class="layui-progress layui-progress-big" lay-filter="progress_'+index+'" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="0%"></div></div></td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload demo-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));


                    //单个重传
                    tr.find('.demo-hide').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) {
                debugger
                //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(4).html('<span style="color: #5FB878;">上传成功</span>');
                    //tds.eq(4).html(''); //清空操作
                    //刷新表格
                    // table.reload('itemFileList', {
                    //     url: url
                    //     , where: {} //设定异步数据接口的额外参数
                    //     //,height: 300
                    // });
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                this.error(index, upload);
            }


            ,
            error: function (index, upload) {
                debugger
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(4).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(5).find('.demo-reload').removeClass('demo-hide'); //显示重传
            }
        })
    ;
})

后台代码
controller

@Controller
@RequestMapping("/file")
public class TestController {

    @Resource
    private TestService testService;


    @GetMapping("/file1")
    public String getFilePage1(){
        return "admin/file/file1";
    }

    @GetMapping("/file2")
    public String getFilePage2(){
        return "admin/file/file2";
    }

    @RequestMapping(value = "/many/upload",method = RequestMethod.POST )
    @ResponseBody
    public WnDataResult manyFileUpload(HttpServletRequest request) {
        //得到文件的列表
        List<MultipartFile> files = ((MultipartHttpServletRequest)            request).getFiles("file");
        String filePath = "D:\\ideaproject\\wnblogserver\\hystrix-server\\src\\main\\resources\\static\\admin\\images\\editor";
       //这里的地址文件上传到的地方
        for (int i = 0; i < files.size(); i++) {
            MultipartFile file = files.get(i);
            if (file.isEmpty()) {
                return WnDataResult.build(500,"上传第" + (i++) + "个文件失败");
            }
            String fileName=new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" +file.getOriginalFilename();

            File dest = new File(filePath ,fileName);
            try {
                file.transferTo(dest);
                 testService.manyFileUpload("\\"+"admin"+"\\"+"images"+"\\"+"editor"+"\\"+fileName);
            } catch (IOException e) {
                return WnDataResult.build(500,"上传第" + (i++) + "个文件失败");
            }
        }
        return WnDataResult.myok();
    }

前端页面


数据库