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("系统繁忙,请联系管理员");
}
});
}
有什么不懂得可以直接私信楼主,由于上班,所以注释都没写
不过相信大家看得懂