FileReader: abort-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.

Das abort-Ereignis des FileReader-Interfaces wird ausgelöst, wenn ein Lesevorgang abgebrochen wurde: zum Beispiel, weil das Programm FileReader.abort() aufgerufen hat.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergeleitet.

Syntax

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

js
addEventListener("abort", (event) => { })

onabort = (event) => { }

Ereignistyp

Ein ProgressEvent. Erbt von Event.

Event ProgressEvent

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Eltern-Interface Event.

ProgressEvent.lengthComputable Schreibgeschützt

Eine boolesche Kennzeichnung, die angibt, ob die gesamte zu leistende Arbeit und die bereits geleistete Arbeit durch den zugrunde liegenden Prozess berechenbar sind. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.

ProgressEvent.loaded Schreibgeschützt

Ein 64-Bit-Ganzzahlwert, der die bereits vom zugrunde liegenden Prozess geleistete 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 Körper der HTTP-Nachricht und schließt Header und andere Overheads aus.

ProgressEvent.total Schreibgeschützt

Ein 64-Bit-Ganzzahlwert, der die gesamte Menge der Arbeit darstellt, die der zugrunde liegende Prozess gerade durchführt. Beim Herunterladen einer Ressource über HTTP ist dies die Content-Length (die Größe des Nachrichtentextes) und schließt Header und andere Überheads aus.

Beispiele

Live-Beispiel

HTML

html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
      type="file"
      id="avatar"
      name="avatar"
      accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>

JavaScript

js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
  reader.abort();
}

fileInput.addEventListener("change", handleSelected);

Ergebnis

Spezifikationen

Specification
File API
# dfn-abort-event
File API
# dfn-onabort

Browser-Kompatibilität

Siehe auch