XHR-Fortschrittsereignis wird nicht ausgelöst, bis der Upload abgeschlossen ist?

Question

Ich verwende den folgenden $ Schnipsel Befehl eine Datei von einer PhoneGap-Anwendung hochladen:

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

Der Upload funktioniert gut. Das Fortschrittsereignis wird jedoch nur einmal ausgelöst, sobald der Upload abgeschlossen ist. Es wird beim Hochladen nicht ausgelöst - der Upload-Fortschritt wird also nicht angezeigt. Es gibt nur eine Pause während des Hochladens, und dann wird 100% angezeigt.

Alle Ideen, was ich falsch mache?

Answer 1

Die Upload-Ereignisse progress werden unter xhr.upload ausgelöst, also den Listener an diese Adresse anhängen und nicht an xhr. Darüber hinaus gibt es progress Ereignisse auf das xhr Objekt, sondern diese für die Antwort ist wieder vom Server.

Siehe the MDN article für weitere Details.

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

_{^{(Dank A. Wolff und seinen Kommentar über die OP.)}}