Layui文件上传带进度条

最近项目有个需求，要求文件上传有实时进度条，前端框架使用的是layui，但是layui的文件上传(upload)和进度条并没有做结合，这里只能靠改源码的方式实现之，折腾了蛮久，最后还是在公司前端的帮助下完成了，感谢。

1.修改layui文件上传ajax的代码：

这里使用的是layui(2.4.3版本)的非模块化 （layui.all.js），模块化请修改modules/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;
},

2.页面以及upload

	
		
		
		
		
		
	

	
		
  			选择文件
		 文件名称: 
		

		
  			上传文件
		
		

		

			

		
		
	

测试：

搞定！有疑问欢迎留言，反正我也解答不上来哈哈哈。