异步上传文件,jquery+ajax,显示进度条
根据网上的资料,做了很多修改,结果发现使用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("上传失败!"); } }); }