如何在上传文件时将“progress”和更新事件绑定到ajax请求

我在php-codeigniter中使用FormData api和ajax将文件上传到服务器。 我的上传在文件选择事件上工作正常。但我想在每个使用更新百分比上传的文件旁边显示进度条。 我的ajax是：

$.ajax({ url : "", type : "POST", beforeSend : function( xhr ) { xhr.overrideMimeType("text/plain; charset=x-user-defined-binary"); }, processData : false, cache : false, contentType : false, data : fd }).done(function(res){ alert (res); }) 

我发现了两个ajax事件，即AjaxSend和Complete，用于放入progress事件，但我不知道如何将进度（或任何）事件绑定到$ .ajax（）调用。 我已经使用了ajaxSend和Complete，如：

 $(document).bind("ajaxSend", function(){ $(".easyPieChart").show(); }).bind("ajaxComplete", function(){ $(".easyPieChart").hide(); }); 

但是这些事件只是在开始时显示进度条（它是canvas），在完成时消失。不是以百分比更新。 任何想法怎么做..谢谢。

Answer 1

找到了这样做的方法..

  $.ajax({ //all prviuos codes and the new things to add as follows: .... .... xhrFields : { onprogress: function (e) { if (e.lengthComputable){ var percentage= Math.round(e.loaded / e.total * 100); $("#percentage").prop('data-percent',percentage); $(".percent").text(percentage); canvas.update(percentage);} }, onload : function(e){ if (e.lengthComputable){ canvas.update(100); } } }, //Other ajax context here.. }); 

多数民众赞成我的进步现在正在显示…… 🙂