[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對象

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方法

var formData = new FormData(document.forms[0]);
$.ajax({
  url : url,
  type : 'POST',
  data : formData, 
  //不處理表單數據
  processData : false, 
  //不處理contentType
  contentType : false,
  beforeSend:function(){
      console.log("start transfer");
  },
  success : function(responseStr) { 
      console.log(responseStr);
  }, 
  error : function(responseStr) { 
     console.log("error");
  },
  //用自定義的xhr代替jquery的xhr
  xhr:xhrOnProgress(function(e){
    var percent=e.loaded / e.total;//計算百分比
  })
});