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("系统繁忙，请联系管理员");
}
});

}

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

不过相信大家看得懂