layui多文件上传分别显示对应文件的进度

1、文件上传回调为 layui 2.5.5 新增，下载2.5.5以上版本

2、修改lay modules模块下的upload.js文件（代码格式后修改），参考链接如下(2021年访问要注册)：

https://fly.layui.com/jie/63783/

上方链接已失效，请自行搜索“修改lay modules模块下的upload.js”关键词来进行修改（注意layui版本）

3、逻辑js代码参考如下，本地测试上传大文件可以比较容易看到进度条效果，不太确定上传文件进度是不是指加载好文件的进度，因为文件上传进度为100%时，还要需要一定时间等待服务器响应返回结果，所以下面代码处理为当文件进度为100%时，人工显示99%,当对应文件的上传请求完毕后done时才把进度显示为100%，当全部文件上传完毕再取消上传文件显示的loading，删除进度条。

        var progressTpl = '<div class="layui-progress layui-progress-big mb5 progress-item" lay-filter="" lay-showpercent="yes"><div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div></div>';
       
        var loadIndex = 0;
        var multifileView = $('#upBGFileList')
            , uploadListIns = layupload.render({
            elem: '#upBGFile'
            , url: '/upload/kindeditorJson'
            , accept: 'file'
            , multiple: true
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致
                loadIndex = layLoading(2, commStr.zzsc); //显示上传loading 封装函数可以自己写
            }
            ,progress: function(n, elem, e, index){
                var layId = "progress"+index;
                if($("#progress"+index).length == 0){
                    var $progress = $(progressTpl);
                    $progress.attr("id", layId);
                    $progress.attr("lay-filter", layId);
                    $(elem).before($progress);
                    element.render("progress");
                }
                var percent = n + '%'; //获取进度百分比
                if(n > 99){
                    //element.progress(layId, "99%"); //可配合 layui 进度条元素使用
                    $("#" + layId).find(".layui-progress-bar").attr("lay-percent", "99%");
                    element.render("progress", layId);
                }else{
                    //element.progress(layId, percent); //可配合 layui 进度条元素使用
                    $("#" + layId).find(".layui-progress-bar").attr("lay-percent", percent);
                    element.render("progress", layId);
                }
            }
            , done: function (res, index, upload) {
                if (res.error == 0) { //上传成功
                    //这里的index和progress那里新加的index值一样
                    element.progress("progress"+index, "100%");
                    $("#progress"+index).find(".layui-progress-bar").attr("lay-percent", "100%");
                    element.render("progress", "progress"+index);
                   
                    //do something
                    return;
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                return layer.msg(commStr.wjscsb);
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                $(".progress-item").remove();
                closeLayLoading(loadIndex); //关闭loading
                if(obj.total == obj.successful){
                    layer.msg(commStr.sccg);
                }else{
                    layer.msg(commStr.sccgwjsl + ": " + obj.successful + ", " + commStr.scsbwjsl + ": " + obj.aborted);
                }
            }
        });

还有一个点是这里的进度条动态改变百分比要这样子写才有正确显示百分比值文字效果：

$("#" + layId).find(".layui-progress-bar").attr("lay-percent", percent);

4、目前实现不了多文件上传的总进度条，因为多文件上传choose文件之后预览preview文件也有时间差，progress那里也是，导致前面的小文件很快进度100%，但是大文件还没识别到，设置setTimeout也不行。

有实现总进度条的求推荐。

歪特、snowballpower