layui文件上傳進度條（模擬）

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

https://blog.csdn.net/weixin_42457316/article/details/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.模擬一個假的進度條

https://blog.csdn.net/lin452473623/article/details/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(); //上傳loading
		var 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