Czy można dodać funkcję onprogress do jQuery.ajax() przy użyciu xhrFields?

Question

Jak zasugerowano tutaj: https://gist.github.com/HenrikJoreteg/2502497, Próbuję dodać funkcję onprogress do mojego przesłania pliku jQuery.ajax(). Przesyłanie działa bez zarzutu, a zdarzenie onprogress uruchamia się, ale nie tak, jak się spodziewałem - zamiast strzelać wielokrotnie w pewnym przedziale czasu, strzela tylko raz, po zakończeniu przesyłania. Czy istnieje sposób na określenie częstotliwości odświeżania na bieżąco? Czy próbuję zrobić coś, czego nie da się zrobić? Oto mój kod:

$.ajax(
{ 
    async: true, 
    contentType: file.type, 
    data: file, 
    dataType: 'xml', 
    processData: false, 
    success: function(xml) 
    { 
     // Do stuff with the returned xml 
    }, 
    type: 'post', 
    url: '/fileuploader/' + file.name, 
    xhrFields: 
    { 
     onprogress: function(progress) 
     { 
      var percentage = Math.floor((progress.total/progress.totalSize) * 100); 
      console.log('progress', percentage); 
      if (percentage === 100) 
      { 
       console.log('DONE!'); 
      } 
     } 
    } 
}); 

Answer 1

Musisz dodać procedurę obsługi zdarzeń do samego żądania, zanim zostanie ono wysłane. jQuery.ajax umożliwia to poprzez 'beforeSend' własność http://api.jquery.com/jQuery.ajax/

na przykład: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

* EDIT * upewnij się, aby spojrzeć na drugiej próbki kodu tego przykładu link. Uważam, że pierwszy jest przestarzały w stosunku do współczesnych wersji jQuery.

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     console.log(percentComplete); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
}); 

Answer 2

Krótka odpowiedź:
Nie, nie możesz robić, co chcesz za pomocą xhrFields.

odpowiedź Long:

Istnieją dwa zdarzenia postęp w obiekt XMLHttpRequest:

• Postęp reakcji (XmlHttpRequest.onprogress)
  To jest, gdy przeglądarka pobiera dane z serwer.

• Postęp prośba (XmlHttpRequest.upload.onprogress)
  To jest, gdy przeglądarka wysyła dane do serwera (w tym parametry POST, pliki cookie i pliki)

W kodzie używasz Zdarzenie postępu reakcji, ale potrzebne jest zdarzenie postępu żądania. Oto jak to zrobić:

$.ajax({ 
    async: true, 
    contentType: file.type, 
    data: file, 
    dataType: 'xml', 
    processData: false, 
    success: function(xml){ 
     // Do stuff with the returned xml 
    }, 
    type: 'post', 
    url: '/fileuploader/' + file.name, 
    xhr: function(){ 
     // get the native XmlHttpRequest object 
     var xhr = $.ajaxSettings.xhr() ; 
     // set the onprogress event handler 
     xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ; 
     // set the onload event handler 
     xhr.upload.onload = function(){ console.log('DONE!') } ; 
     // return the customized object 
     return xhr ; 
    } 
}); 

xhr parametr opcja musi być funkcją, która zwraca rodzimą obiekt XMLHttpRequest dla jQuery w użyciu.