ajax数据加载动画及上传进度条

1，简短说明

数据加载动画及上传进度条展示

2，实例

html

<style>
#wai{
	width:300px;
	height:30px;
	border:1px solid #5FB878;
	border-radius:20px;
}
#nei{
	width:0px;
	height:30px;
	line-height:30px;
	background:#5FB878;
	text-align:center;
	border-radius:20px;
}
</style>

<div id="wai">
  <div id="nei"><span id="precent" style="color:white;"></span></div>
</div>

<script>

var form = document.getElementById("form-upload");
var formData = new FormData(form);
formData.append("city",$("#city-list option:selected").val());
	
$.ajax({
	     url:'excelImport',
	     type:'post',
	     async:true,
	     data:formData,
	     contentType:false, // 文件上传
	     processData:false, // 文件上传
	     // 数据加载动画--start
	     beforeSend: function () {
	         $("body").append('<div id="pload" style="position:fixed;top:45%;z-index:1200;background:url(images/loading2.gif) top center no-repeat;width:1900px;height:768px;margin:auto auto;"></div>');
	     },
	     complete: function () {
	         $("#pload").remove();
	     },
	     // 数据加载动画--end
	     xhr:function(){
	       	 var xhr = $.ajaxSettings.xhr();
	       	 if(xhr.upload){
	       		 xhr.upload.addEventListener("progress",function(evt){
	       			 var loaded = evt.loaded; // 已加载进度
	      				 var tot = evt.total; // 总进度
	      				 var per = Math.floor(100*loaded/tot);
	      				 if(100==per){
	      					 document.getElementById('nei').style.width='99%';
	       		         document.getElementById('precent').innerHTML='99%';
	      				 }else{
	       				 document.getElementById('nei').style.width=per+'%';
	       		         document.getElementById('precent').innerHTML=Math.floor(per)+'%';
	      				 }
	       		 },false);
	       		 return xhr;
	       	 }
	     },
	     dataType:'json',
	     success:function(dataObj){
	        if(200==dataObj.status){
	        	layer.msg("文件上传成功！！");
	        }else{
	        	layer.msg(dataObj.msg);
	        }
	     },
	     error:function(e){
	    	layer.msg("上传异常！！");
	     }   
});
</script>

3，说明

这里的上传进度只是文件上传到后台的进度，后台对上传文件做其他处理时，对应进度跟踪需要考虑其他思路

4，参考链接

https://www.cnblogs.com/yz-blog/p/7843468.html
https://www.cnblogs.com/lydiawork/p/8488893.html