FileReader: loadstart-Ereignis

Baseline Widely available

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

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das loadstart-Ereignis der FileReader-Schnittstelle wird ausgelöst, wenn ein Datei-Lesevorgang begonnen hat.

Dieses Ereignis ist nicht abbrechbar und wird nicht weitergeleitet.

Syntax

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

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

onloadstart = (event) => {};

Ereignistyp

Ein ProgressEvent, das von Event erbt.

Event ProgressEvent

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem übergeordneten Event.

ProgressEvent.lengthComputable Schreibgeschützt

Ein boolesches Flag, das anzeigt, ob die gesamte zu erledigende Arbeit und die bereits geleistete Arbeit durch den zugrunde liegenden Prozess berechenbar ist. Mit anderen Worten, es sagt aus, ob der Fortschritt messbar ist oder nicht.

ProgressEvent.loaded Schreibgeschützt

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

ProgressEvent.total Schreibgeschützt

Ein 64-Bit-Unsigned-Integer, der die gesamte Menge an Arbeit repräsentiert, die der zugrunde liegende Prozess gerade ausführt. Beim Herunterladen einer Ressource über HTTP ist dies die Content-Length (die Größe des Hauptteils der Nachricht) und schließt Header und andere Overheads 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);
  }
}

fileInput.addEventListener("change", handleSelected);

Ergebnis

Spezifikationen

Specification
File API
# dfn-loadstart-event
File API
# dfn-onloadstart

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch