Ajax上传图片并显示进度

$.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');
	}
}

进度条代码

 

你可能感兴趣的:(Jquery)