XHR Level2 z jQuery do przesłania pliku

Question

Jak uzyskać dostęp do surowego obiektu XHR z Ajax jQuery? Rzecz w tym, że nowa specyfikacja XMLHttpRequest Level 2 zapewnia poddomyślność XHR nazywaną wysyłaniem, ale najwyraźniej jQuery jej jeszcze nie ma. Chcę nadal używać jQuery Ajax, ale nie wiem jak scalić nową funkcjonalność z obecną biblioteką jQuery.

Answer 1

W nowych wersjach JQuery surowy obiekt xhr jest zawijany w jqXhr Obiekt, który nie ma żadnego odniesienia do nowej właściwości wysyłania xhr iw dokumentacji nie jest zbyt jasny jak to zrobić. sposób znalazłem to zrobić, z kilku dodatkowych ustawień w celu uzyskania pomyślnego jquery-ajax-HTML5 plików uploader było:

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

z $ .ajaxSettings.xhr() otrzymuję origianal XHR, a następnie przetestować czy ma właściwość upload do wiązania zdarzenia postępu, aby kontrolować pasek postępu (HTML5?). Inne ustawienia pozwalają mi przesłać przez jquery ajax formularz jako obiekt FormData.

Answer 2

Mała modyfikacja odpowiedzi DannYOs. Zrobiłem wtyczkę jQuery, do której można wywołać wejście do pliku, aby było prostsze. Po prostu przesyłasz swój skrypt do przesyłania, następnie funkcję sukcesu, a następnie funkcję postępu.

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

Wykorzystanie

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