[jquery]为jQuery.ajax添加onprogress事件

原理：

给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程

var xhr = new XMLHttpRequest();  xhr.upload.onprogress = function(e) {}

因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法

所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现

首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var xhrOnProgress=function(fun) {   xhrOnProgress.onprogress = fun; //绑定监听   //使用闭包实现监听绑   return function() {     //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象     var xhr = $.ajaxSettings.xhr();     //判断监听函数是否为函数     if (typeof xhrOnProgress.onprogress !== 'function')       return xhr;     //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去     if (xhrOnProgress.onprogress && xhr.upload) {       xhr.upload.onprogress = xhrOnProgress.onprogress;     }     return xhr;   } }

 

上传时使用$.ajax方法

?

1 2 3 4 5 6 7

var formData = new FormData(document.forms[0]);<br>$.ajax({   url : url,   type : 'POST',<br>  data : formData, <br>  //不处理表单数据<br>  processData : false, <br>  //不处理contentType<br>  contentType : false,<br>  beforeSend:function(){<br>      console.log("start transfer");<br>  },<br>  success : function(responseStr) { <br>      console.log(responseStr);<br>  }, <br>  error : function(responseStr) { <br>     console.log("error");<br>  },<br>  //用自定义的xhr代替jquery的xhr   xhr:xhrOnProgress(function(e){     var percent=e.loaded / e.total;//计算百分比   }) });