异步上传文件,jquery+ajax,显示进度条

时间:2021-11-30 15:36:19

根据网上的资料,做了很多修改,结果发现使用ajax上传数据时若要监听xhr.upload.addEventListener("progress",functiion(e),false),必须将async设置为true。

例子:

//上传文件
function uploadFiles(){ var formData = new FormData();
formData.append("file",$("#uploadFile")[0].files[0]);//append()里面的第一个参数file对应permission/upload里面的参数file $.ajax({
type:"post",
async:true, //这里要设置异步上传,才能成功调用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函数
Accept:'text/html;charset=UTF-8',
data:formData,
contentType:"multipart/form-data",
url: uploadUrl,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
xhr:function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',function(e){
var loaded = e.loaded; //已经上传大小情况
var total = e.total; //附件总大小
var percent = Math.floor(100*loaded/total)+"%"; //已经上传的百分比
console.log("已经上传了:"+percent);
$("#processBar").css("width",percent);
}, false); // for handling the progress of the upload
}
return myXhr;
},
success:function(data){
console.log("上传成功!!!!");
},
error:function(){
alert("上传失败!");
}
});
}