Ajax上传图片并显示进度

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/huangyuxin_/article/details/82782389

$.ajax({  
	type: "POST",  
	url: "/user/ajax_upload",  
	data: formData,
	contentType: false,  
	processData: false, 
	 xhr: function(){
	　　　　　　var xhr = $.ajaxSettings.xhr();
	　　　　　　if(onprogress && xhr.upload) {
	　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false);
	　　　　　　　　return xhr;
	　　　　　　}
	　　　　}, success: function(data) {
		//上传成功
	}, error: function(XMLHttpRequest, textStatus, errorThrown) {  
	    //上传失败
	}  
});  

function onprogress(evt){
 var loaded = evt.loaded;     //已经上传大小情况 
 var tot = evt.total;      //附件总大小 
 var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
	 $("#pre").css('display','block');
	$("#progress").css('width',per*2+'px');
	$("#shu").text(per+'%');
	if(per == 100){
	 $("#pre").css('display','none');
	}
}

进度条代码

<div style='position:fixed;width:1200px;display:none' id='pre'>
	<div style="width:200px; height:10px; border-radius:5px; background-color:#ddd; position:relative;margin:0 auto">
    <div style="width:0px;height:10px;  border-radius:5px; background-color:#50c000; position:absolute; left:0; bottom:0;" id='progress'></div>
    <div style='float:left;margin-top:10px;text-align:center;font-weight:5em;font-weight:bold;' id='shu'></div>
</div>
</div>