layui动态展示上传进度

柔光的暖阳◎ 2022-04-11 08:54 409阅读 0赞

> 修改layui模块中的upload.js

xhr:function () {
    			var newXhr = i.ajaxSettings.xhr();
    			// 给xhr的upload添加progress的监听
    			newXhr.upload.addEventListener('progress' , function (e) {
    				var percent = Math.floor(e.loaded / e.total * 100); //计算出进度
    				typeof l.progress === 'function' && l.progress(e , percent); // 传递给upload的progress回调
    			});
    			return newXhr;
    		},

将上述代码添加到如下位置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d2ZvcmJpZF80MDQ_size_16_color_FFFFFF_t_70][]

> 上传按钮

> js代码展示

layui.use(['upload','element','layer'], function(){
    			  var upload = layui.upload;
    			  var element = layui.element;
    			  var layer = layui.layer;
    			  element.init();
    			  //执行实例
    			  var uploadInst = upload.render({
    			    elem: '#test1' //绑定元素
    			    ,url: '/user/ceshi' //上传接口
    			    ,accept: 'file'
    			    ,data: {path:$("#path").val()}
    			 	,progress: function(e , percent) {
    					console.log("进度：" + percent + '%');
    					element.progress('progressBar',percent  + '%');
    				}
    			  	,before:function(){
    			  		layer.open({
    			  		  type: 1,
        			  	  title: '上传进度',
    			  		  area:'500px',
    			  		  skin: 'layui-layer-molv',
    			  		  closeBtn: 0,
    			  		  content: $('#win') //这里content是一个普通的String
    			  		});
    			  	}
    			    ,done: function(res){
    			    	 if(res.code == 0){
    			    		 alert("上传成功");
    			    		window.location.reload();
    			    	}else{
    			    		alert("上传失败");
    			    	}
    			    }
    			    ,error: function(){
    			      //请求异常回调
    			      alert("上传过程请勿其他操作！请重新上传");
    			    }
    			  });
      };

上传效果图：

![20181205114518440.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d2ZvcmJpZF80MDQ_size_16_color_FFFFFF_t_70]: /images/20220411/69c0ac4ffdae486ab41ec1635180d57c.png
[20181205114518440.png]: /images/20220411/bb3112b9c1b84ea59ae822c44c15226d.png