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

標籤：abort   成功   obj   span   xmlhttp   auto   ogre   action   判斷   

這個問題本身不複雜，痛點在於需要改 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參數都可以正常提交。

參考：80785180

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