formdata-ajax上传图片，显示进度条

formdata相信小伙伴都知道，那么如何用ajax上传图片并且显示进度条呢？

楼主就直接给代码了

function uploadpro(valuepro){
		var schedulepro = "schedulepro" + valuepro;          //显示进度条id
		var uploadpro = "uploadpro" + valuepro;              //获取到上传按钮的id
		var imgidpro = "showpro" + valuepro;                 //获取到要显示图片的id
		var fileidpro = "imagepro" + valuepro;               //获取文件的id
		
		var formData = new FormData();
		formData.append("file",$("#"+fileidpro+"")[0].files[0]);
		
		$.ajax({
			type:"post",
			url:config.url+"/home/uploadFile?token="+window.sessionStorage.tokenbody,
			async:true,
			cache:false,
			data:formData,
			processData:false,
			contentType:false,
			dataType:"json",
			xhr: function(){
        		myXhr = $.ajaxSettings.xhr();
        		if(myXhr.upload){
          			myXhr.upload.addEventListener('progress',function(e){
	            		if(e.lengthComputable){
	              			var percent = Math.floor(e.loaded / e.total*100);
	              			$("#"+schedulepro+"").html('已上传：'+percent+'%');
	            		}
	          		}, false);
        		}
        		return myXhr;
    		},
			success:function(data){
				if(data.errcode == 0){
					layer.msg("上传成功");
					$("#"+uploadpro+"").attr("disabled",true);
	            	$("#"+imgidpro+"").attr("src",data.body);
				}
				if(data.errcode != 0 && data.errcode != 103){
					layer.msg(data.errmsg);
				}
	    		if(data.errcode == 103){
					layer.msg(data.errmsg+",将于2秒后自动跳转到登录页");
					setTimeout('window.location.href="../../../LxarMirage/login.html"',2000);
				}
			},
			error:function(){
				layer.msg("系统繁忙，请联系管理员");
			}
		});

	}

有什么不懂得可以直接私信楼主，由于上班，所以注释都没写

不过相信大家看得懂