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); 
});