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

上传效果图：

文章来源: layui动态展示上传进度

标签

动态