layui檔案上傳進度條（類比）

標籤：圖片   數值   clear   xhr   利用   res   java   .text   進度   

1.修改上傳組件js(沒測)

81017471

https://www.cnblogs.com/youmingkuang/p/9183528.html

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

 

1、upload.js 擴充

功能利用ajax的xhr屬性實現
該功能修改過modules中的upload.js檔案
功能具體實現：
在js檔案中添加監聽函數

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

初始化上傳

//初始化上傳 upload.render({     elem: ‘上傳地址‘     ,url: path+‘/upload/uploadVideo.do‘     ,accept: ‘video‘    ,size: 512000    ,auto:false    ,xhr:xhrOnProgress    ,progress:function(value){//上傳進度回調 value進度值        element.progress(‘demo‘, value+‘%‘)//設定頁面進度條     }    ,bindAction:‘#uploadvideo‘     ,before: function(input){    //返回的參數item，即為當前的input DOM對象        console.log(‘檔案上傳中‘);    }    ,done: function(res){             //上傳成功           console.log(res)     } });

修改modules中upload.js檔案的ajax方法

 //提交檔案        $.ajax({          url: options.url          ,type: options.method          ,data: formData          ,contentType: false           ,processData: false          ,dataType: ‘json‘          ,xhr:options.xhr(function(e){//此處為新添加功能                var percent=Math.floor((e.loaded / e.total)*100);//計算百分比                options.progress(percent);//回調將數值返回           })          ,success: function(res){            successful++;            done(index, res);            allDone();          }          ,error: function(e){             console.log(e)            aborted++;            that.msg(‘請求上傳介面出現異常‘);            error(index);            allDone();          }        });

後台代碼：

        public ActionResult UploadFiles(HttpPostedFileBase fileNames)        {            string path = "";            //小於20M            if (fileNames.ContentLength > 0 && fileNames.ContentLength <= 120971520)            {                var fileName = Path.GetFileName(fileNames.FileName);                string q_FN = fileName.Substring(0, fileName.LastIndexOf("."));                string h_FN = fileName.Substring(fileName.LastIndexOf("."));                string NewFileName = q_FN + DateTime.Now.ToString("yyyyMMddHHmmss") + h_FN;                path = Path.Combine(Server.MapPath("/Uploadfile/"), NewFileName);                fileNames.SaveAs(path);                path = "/Uploadfile/" + NewFileName;                var relt = new { tc = path };                return Content(JsonConvert.SerializeObject(relt));            }            else            {                var relt = new { tc = "上傳檔案要小於20M" };                return Content(JsonConvert.SerializeObject(relt));            }        }

 

功能到此結束！！！

列子：

 

 

2.類比一個假的進度條

80784717

layui.use([‘upload‘,‘element‘,‘layer‘], function(){var upload = layui.upload,element = layui.element,layer = layui.layer;var timer;//定義一個計時器//選完檔案後不自動上傳upload.render({    elem: ‘#test8‘    ,url: ‘upload‘    ,async: false    ,method: ‘post‘    ,data: {        upgradeType: function(){    return $("input[name=‘upgradeType‘]:checked").val();//額外傳遞的參數        }    }    ,auto: false    ,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){ //obj參數包含的資訊，跟choose回調完全一致layer.load(); //上傳loadingvar n = 0; timer = setInterval(function(){//按照時間隨機產生一個小於95的進度，具體數值可以自己調整    n = n + Math.random()*10|0;      if(n>95){n = 95;clearInterval(timer);    }    element.progress(‘demo‘, n+‘%‘);}, 50+Math.random()*100);    }    ,done: function(res){clearInterval(timer);element.progress(‘demo‘, ‘100%‘);//一成功就把進度條置為100%layer.closeAll(); layer.msg(‘上傳成功‘);}    ,error: function(index, upload){element.progress(‘demo‘, ‘0%‘);layer.closeAll(); //關閉所有層layer.msg(‘上傳更新包失敗‘);    }});});

　　

參考：https://www.layui.com/doc/modules/upload.html

layui檔案上傳進度條（類比）