layui上傳文件配合進度條

首先看一下效果圖：

修改layui的源文件upload.js

1.打開layui/modules/upload.js
2.搜索ajax 
3.找到url:
4.添加以下代碼：
,xhr:l.xhr(function(e){//此處為新添加功能
         var percent=Math.floor((e.loaded / e.total)*100);//計算百分比
         l.progress(percent);//回調將數值返回
     })

5.upload.js 中 p.prototype.config也要改，加一個xhr的定義，否則傳文件時如果不設xhr會報錯

p.prototype.config={
    accept:"images",exts:"",auto:!0,bindAction:"",url:""
    ,field:"file",method:"post",data:{},drag:!0,size:0
    ,number:0,multiple:!1
    ,xhr:function(){}//此處需要添加
      },

頁面js代碼

layui.use(['form', 'layer', "jquery",'element', 'laydate', "upload"], function () {
    var  upload = layui.upload,
        element=layui.element,
        layer = parent.layer === undefined ? layui.layer : top.layer;
    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;
        }
    }

    //選擇並網時間
    laydate.render({
        elem: '.connectGridTime'
    });


    var enrollArr = [];
    var demoCount=0,demoFlag=false
    var demoClass
    
    //公司注冊信息上傳文件
    upload.render({
        elem: '.enroll',
        accept: 'file',
        multiple: true,
        url: sessionStorage.getItem("imgUrl") + "picture-console/common/file/upload",
        xhr: xhrOnProgress,
        progress: function (value) { //上傳進度回調 value進度值,由於是進度條同時又是多文件上傳不只一個進度條，所以要保證每次進度條的類名不一致，demoCount控制類名，demoFlag保證上下一致，所以該方法一直在被調用
            if(demoFlag){
                console.log(demoCount)
                element.progress(`demo${demoCount}`, value + '%') //設置頁面進度條
            }
           
        },

        before: function (obj) {
            layer.load()
            obj.preview(function (index, file, result) {
                layer.closeAll('loading'); //關閉loading
                
                demoCount++
                console.log('before',demoCount)
                var size = file.size / 1024 / 1024
                if(size<=1){
                    size=keepTwoDecimal(size*1024)+'KB'
                }else{
                    size=keepTwoDecimal(size)+'MB'
                }
                var tr=`
                    <tr>
                        <td class="fileName">${file.name}</td>
                        <td>${size}</td>
                        <td class="uploadok">
                        <div class="uploadLoadingDiv">
                        <div class="layui-progress bar" lay-showpercent="true" lay-filter="demo${demoCount}">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"><span class="layui-progress-text">100%</span></div>
                        </div>
                    </div>
                        </td>
                        <td><button class="layui-btn layui-btn-danger layui-btn-sm" onclick="registerDel(this)">刪除</button></td>
                    </tr>
                `   
                $('#enrollBox').append(tr);
                demoFlag=true
                
            })
        },
        error: function(index, upload){
			element.progress(`demo${demoCount}`, '0%');
			layer.msg('上傳失敗');
        },
        choose:function(obj){
            demoFlag=false
        },
        done: function (res) {
            if (res.code == '200') {
                enrollArr.push(res.data[0]);
            }
        }
    });
    //四舍五入保留2位小數（若第二位小數為0，則保留一位小數）
function keepTwoDecimal(num) {
    var result = parseFloat(num);
    
    result = Math.round(num * 100) / 100;
    return result;
  }

});