layui动态展示上传进度

修改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;
		},

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

上传按钮

<button type='button' class='layui-btn' id='test1'><i class='layui-icon'>&#xe67c;</i>上传文件</button>

<div id="win" style="display:none" class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>

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("上传过程请勿其他操作！请重新上传");
			    }
			  });
  };

上传效果图：