Zdarzenie postępu XHR nie jest uruchamiane, dopóki nie zakończy się przesyłanie?

Question

Używam następujące polecenia $ .ajax załadować plik z aplikacją PhoneGap:

function updateProgress(evt) { 
    if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total * 100; 
     console.log(percentComplete + "%"); 
    } 
} 

$.ajax({ 
    url: url, 
    type: "POST", 
    data: data, 
    cache: false, 
    dataType: "json", 
    processData: false, 
    contentType: false, 
    success: successCallback, 
    error: errorCallback, 
    xhr: function() { 
     var xhr = new window.XMLHttpRequest(); 
     xhr.addEventListener("progress", updateProgress, false); 
     return xhr; 
    } 
}); 

Upload działa dobrze. Jednak zdarzenie progress uruchamia się tylko jeden raz, po zakończeniu przesyłania. W rzeczywistości nie uruchamia się podczas przesyłania - więc postęp przesyłania nie jest wyświetlany. Podczas przesyłania jest tylko pauza, a następnie wyświetla się w 100%.

Jakieś pomysły, co robię źle?

Answer 1

Zdarzenia progress są wysyłane na xhr.upload, więc dołącz do nich słuchacza, a nie xhr. Zdarzają się również zdarzenia progress na obiekcie xhr, ale jest to związane z odpowiedzią przychodzącą z serwera.

Aby uzyskać więcej informacji, patrz the MDN article.

xhr.upload.addEventListener('progress', updateProgress, false) 

_{^{(Dzięki A. Wolff i jego komentarz na OP.)}}