XMLHttpRequestUpload: progress-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.

Das progress-Ereignis wird regelmäßig ausgelöst, wenn eine Anfrage mehr Daten empfängt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("progress", (event) => {});

onprogress = (event) => {};

Ereignistyp

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.

lengthComputable Schreibgeschützt

Ein boolesches Flag, das anzeigt, ob die zu erledigende Gesamtarbeit und die bereits erledigte Arbeit durch den zugrunde liegenden Prozess berechenbar sind. Mit anderen Worten, es zeigt, ob der Fortschritt messbar ist oder nicht.

loaded Schreibgeschützt

Ein 64-Bit-Integer-Wert, der die Menge der bereits von dem zugrunde liegenden Prozess geleisteten Arbeit angibt. Das Verhältnis der erledigten Arbeit kann berechnet werden, indem total durch den Wert dieser Eigenschaft geteilt wird. Beim Herunterladen einer Ressource über HTTP wird hier nur der Körper der HTTP-Nachricht gezählt, nicht jedoch die Header und anderer Overhead.

total Schreibgeschützt

Ein 64-Bit-Integer, der die Gesamtmenge der Arbeit angibt, die der zugrunde liegende Prozess zurzeit ausführt. Beim Herunterladen einer Ressource über HTTP entspricht dies der Content-Length (der Größe des Nachrichtentextes) und schließt die Header und den anderen Overhead nicht ein.

Beispiele

Verwendung des progress-Ereignisses

Sie können das progress-Ereignis verwenden, um Informationen über den Fortschritt eines langwierigen Uploads zu erhalten. Für ein vollständiges Codebeispiel, das eine Datei hochlädt und eine Fortschrittsanzeige anzeigt, siehe die Hauptseite von XMLHttpRequestUpload.

js
// Each time a progress event is received we update the progress bar
// and the progress message
xhr.upload.addEventListener("progress", (event) => {
  progressBar.value = event.loaded; // Update the progress bar
  log.textContent = `Uploading (${((event.loaded / event.total) * 100).toFixed(
    2,
  )}%)…`;
});

Spezifikationen

Specification
XMLHttpRequest
# event-xhr-progress
XMLHttpRequest
# handler-xhr-onprogress

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
progress event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch