XMLHttpRequestUpload: progress event

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

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

onprogress = (event) => { }

Ein ProgressEvent. Erbt von Event.

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

lengthComputable Schreibgeschützt

Ein boolesches Flag, das anzeigt, ob die gesamte zu leistende Arbeit und die bereits geleistete Arbeit des zugrunde liegenden Prozesses berechenbar sind. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.

loaded Schreibgeschützt

Ein 64-Bit-Integer ohne Vorzeichen, der die Menge der bereits vom zugrunde liegenden Prozess geleisteten Arbeit angibt. Das Verhältnis der geleisteten Arbeit kann berechnet werden, indem total durch den Wert dieser Eigenschaft geteilt wird. Beim Herunterladen einer Ressource über HTTP zählt dies nur den Body der HTTP-Nachricht und schließt Header und andere Overheads aus.

total Schreibgeschützt

Ein 64-Bit-Integer ohne Vorzeichen, der die gesamte Menge der Arbeit darstellt, die der zugrunde liegende Prozess gerade ausführt. Beim Herunterladen einer Ressource über HTTP ist dies die Content-Length (die Größe des Bodys der Nachricht), und schließt die Header und anderen Overheads aus.

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

// 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,
  )}%)…`;
});

• Verwandte Ereignisse: loadstart, load, error, loadend, timeout, abort
• Überwachung des Fortschritts
• XMLHttpRequestUpload