XHR Düzey 2, jQuery ile dosya yükleme için

Question

Ham XHR nesnesine jQuery Ajax'den nasıl erişebilirim? Sorun, yeni XMLHttpRequest Düzey 2 belirtiminin, yükleme adı verilen XHR'nin bir alt özelliğini sağlar, ancak görünüşe göre jQuery henüz içermez. JQuery Ajax'ı kullanmaya devam etmek istiyorum ancak mevcut jQuery kitaplığı ile yeni işlevselliği nasıl birleştireceğimi bilmiyorum.

Answer 1

JQuery'nin yeni sürümlerinde, raw xhr nesnesi, xhr'in yeni yükleme özelliğine herhangi bir gönderme yapmayan jqXhr Nesnesine sarılır ve belgede de bunun nasıl yapılacağı çok açık değildir. yolu Ben başarılı jquery-ajax-HTML5 dosyası yükleyen kişiyle almak için bazı ekstra ayarlarla, bu konuda bulduğum oldu:

$ .ajaxSettings.xhr() Sonra ben test origianal xhr olsun ile

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

Bir ilerleme (HTML5?) çubuğunu denetlemek için bir ilerleme olayına bağlanmak için özellik yüklemesi varsa. Diğer ayarlar jquery ajax yoluyla formu bir FormData nesnesi olarak göndermeme izin verir.

Answer 2

DannYO'lar için küçük bir değişiklik var. Daha basit bir hale getirmek için bir dosya girişini çağırabileceğiniz bir jQuery eklentisi yaptım. Sadece yükleme komut dosyanızı, ardından başarı fonksiyonunuzu ve ardından ilerleme fonksiyonunuzu iletin.

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

Kullanımı

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