XHR Level2 con jQuery per il caricamento di file

Question

Come accedere all'oggetto XHR non elaborato da jQuery Ajax? Il fatto è che la nuova specifica XMLHttpRequest Level 2 fornisce una sotto-proprietà di XHR chiamata upload ma apparentemente jQuery non ce l'ha ancora. Voglio continuare a utilizzare jQuery Ajax ma non so come unire la nuova funzionalità con la libreria jQuery corrente.

Answer 1

Nelle nuove versioni di JQuery, l'oggetto xhr grezzo viene avvolto in oggetto jqXhr che non ha alcun riferimento alla nuova proprietà di upload di xhr e nella documentazione non è molto chiaro come farlo. il modo che ho trovato per fare questo, con alcune impostazioni aggiuntive per ottenere un successo di file uploader jquery-ajax-HTML5 era:

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

con $ .ajaxSettings.xhr() ottengo il XHR origianal, poi verifico se ha il caricamento della proprietà per associare un evento di progresso per controllare una barra di avanzamento (HTML5?). Le altre impostazioni mi consentono di inviare tramite jquery ajax il modulo come oggetto FormData.

Answer 2

Una piccola modifica alla risposta di DannYOs. Ho creato un plugin jQuery che puoi chiamare su un file input per renderlo più semplice. Devi solo passare il tuo script di caricamento, poi la tua funzione di successo e poi la tua funzione di avanzamento.

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

Uso

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