XHR Level2的使用jQuery文件上傳

Question

我怎樣才能訪問來自jQuery的阿賈克斯原始XHR對象？ 問題是，新的XMLHttpRequest級別2規範提供XHR稱爲上傳的子屬性，但顯然jQuery的沒有它。我想使用jQuery Ajax來保持，但我不知道如何與目前的jQuery庫合併新功能。

Answer 1

jQuery中的新版本的原始XHR對象被包裹在jqXhr對象不具有對XHR的新上傳屬性和文檔中的任何參考不是很清楚如何做到這一點無論是。 的路上，我發現做到這一點，有一些額外的設置，以獲得一個成功的jQuery的Ajax的HTML5文件上傳爲：

var formData = new FormData($('#myForm')[0]); 
$.ajax({ 
    url: 'upload.php', 
    type: 'POST', 
    xhr: function() { 
     myXhr = $.ajaxSettings.xhr(); 
     if(myXhr.upload){ 
      myXhr.upload.addEventListener('progress',progressHandlerFunction, false); 
     } 
     return myXhr; 
    }, 
    data: formData, 
    cache: false, 
    contentType: false, 
    processData: false 
}); 

與$ .ajaxSettings.xhr（）我得到的origianal XHR，然後我考如果它有屬性上傳來綁定進度事件來控制進度（HTML5？）欄。其他設置允許我通過jQuery AJAX發送形式爲FORMDATA對象。

Answer 2

稍加修改，以DannYOs答案。我做了一個jQuery插件，你可以調用一個文件輸入來簡化它。你只要傳遞你的上傳腳本，然後傳遞你的成功函數，然後傳遞你的進度函數。

$.fn.upload = function(remote,successFn,progressFn) { 
    return this.each(function() { 

     var formData = new FormData(); 
     formData.append($(this).attr("name"), $(this)[0].files[0]); 

     $.ajax({ 
      url: remote, 
      type: 'POST', 
      xhr: function() { 
       myXhr = $.ajaxSettings.xhr(); 
       if(myXhr.upload && progressFn){ 
        myXhr.upload.addEventListener('progress',progressFn, false); 
       } 
       return myXhr; 
      }, 
      data: formData, 
      cache: false, 
      contentType: false, 
      processData: false, 
      complete : function(res) { 
       if(successFn) successFn(res); 
      } 
     }); 
    }); 
} 

使用

$(".myFile").upload("upload.php",function(res) { 
    console.log("done",res); 
},function(progress) { 
    console.log("progress", progress); 
});