layui 魔改：上傳時的真實進度條

這個問題本身不復雜，難點在於需要改 layui 的源碼。

HTML略。

網頁的JS域：

layui.use(['upload','element','layer'], function(){
    var upload = layui.upload,element = layui.element,layer = layui.layer;
    upload.render({
    elem: '#test8'
    ,url: 'upload'
    ,async: false
    ,method: 'post'
    ,data: {
        upgradeType: function(){
        return $("input[name='upgradeType']:checked").val();
        }
    }
    ,auto: false
    ,xhr:xhrOnProgress
    ,progress:function(value){//上傳進度回調 value進度值
        element.progress('demo', value+'%')//設置頁面進度條
    }
    ,accept: 'file' //普通文件
    ,exts: 'zip' //只允許上傳壓縮文件
    ,field:'uploadFile'
    ,bindAction: '#test9'
    ,choose: function(obj){
        var uploadFileInput=$(".layui-upload-file").val();
        var uploadFileName=uploadFileInput.split("\\");
        $("#uploadName").text(uploadFileName[uploadFileName.length-1]);
    }
    ,before: function(obj){
        layer.load(); //上傳loading
    }
    ,done: function(res){
        layer.msg("上傳成功");
    }
    ,error: function(index, upload){
        element.progress('demo', '0%');
        layer.msg('上傳失敗');
    }
    });
});

//創建監聽函數
     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;
         }
     }

可以考慮把 xhrOnProgress 放在一個庫里面，但不知道能不能直接放到Layui的源碼里面。

然后就是重點了：改 layui 源碼。

upload.js : 

...
//默認配置
  Class.prototype.config = {
    accept: 'images' //允許上傳的文件類型：images/file/video/audio
    ,exts: '' //允許上傳的文件后綴名
    ,auto: true //是否選完文件后自動上傳
    ,bindAction: '' //手動上傳觸發的元素
    ,url: '' //上傳地址
    ,field: 'file' //文件字段名
    ,method: 'post' //請求上傳的http類型
    ,data: {} //請求上傳的額外參數
    ,drag: true //是否允許拖拽上傳
    ,size: 0 //文件限制大小，默認不限制
    ,number: 0 //允許同時上傳的文件數，默認不限制
    ,multiple: false //是否允許多文件上傳，不支持ie8-9
    ,xhr:function(){}
  };
...
$.ajax({
    url: l.url
    ,type: l.method
    ,data: formData
    ,contentType: false 
    ,processData: false
    ,dataType: 'json'
    ,xhr:l.xhr(function(e){//此處為新添加功能
         var percent=Math.floor((e.loaded / e.total)*100);//計算百分比
         l.progress(percent);//回調將數值返回
 })
     ,success: function(res){
         successful++;
         done(index, res);
         allDone();
     }
     ,error: function(e){
         console.log(e)
         aborted++;
         that.msg('請求上傳接口出現異常');
         error(index);
         allDone();
     }
});
...

需要修改的地方標紅了。

這樣就完成了，寫上傳業務的時候不管有沒有寫xhr參數都可以正常提交。

參考：https://blog.csdn.net/lin452473623/article/details/80785180