FileReader: loadstart — Ereignis · JavaScript-Referenz

Signatur

fileReader.addEventListener("loadstart", handler)

Beschreibung

Das Ereignis loadstart ist das erste Fortschrittsereignis eines FileReader. Es tritt direkt nach dem Aufruf von readAsText(), readAsDataURL(), readAsArrayBuffer() oder readAsBinaryString() ein. Zu diesem Zeitpunkt hat readyState den Wert 1 (LOADING) und result ist noch null.

Den Handler registrierst du entweder mit addEventListener("loadstart", handler) oder über die Eigenschaft onloadstart. Das Ereignisobjekt ist ein ProgressEvent mit den Eigenschaften loaded (meist 0), total und lengthComputable.

Typischerweise nutzt man loadstart, um die Oberfläche auf den Ladezustand vorzubereiten, also zum Beispiel einen Spinner oder Fortschrittsbalken einzublenden, Schaltflächen zu sperren oder die Startzeit zu protokollieren. Die Ereignisse laufen in dieser Reihenfolge ab: loadstart → progress (0‑mal oder öfter) → load / error / abort → loadend.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, hier `"loadstart"`.
$handler Pflicht	(event: ProgressEvent<FileReader>) => void		Callback, das beim Start des Lesevorgangs ein `ProgressEvent` erhält. `event.target` ist der `FileReader`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein ProgressEvent übergeben.

Beispiele

Ladeanzeige mit addEventListener einblenden

const input = document.querySelector('#datei');
const status = document.querySelector('#status');

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.addEventListener('loadstart', (event) => {
    status.textContent = `Lese ${file.name} …`;
    console.log('readyState:', reader.readyState, 'total:', event.total);
  });

  reader.addEventListener('loadend', () => {
    status.textContent = 'Fertig';
  });

  reader.readAsText(file);
});

readyState: 1 total: 2048

Über die Eigenschaft onloadstart und Entfernen des Listeners

const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
const reader = new FileReader();

const onStart = () => console.log('Lesen gestartet');

// Variante 1: on-Eigenschaft
reader.onloadstart = () => console.log('onloadstart ausgelöst');

// Variante 2: Listener hinzufügen und wieder entfernen
reader.addEventListener('loadstart', onStart);
reader.removeEventListener('loadstart', onStart);

reader.onload = () => console.log('Ergebnis:', reader.result);
reader.readAsText(blob);

onloadstart ausgelöst Ergebnis: Hallo Welt

Ereignisreihenfolge und Dauer messen

const readFile = (blob) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  let start;

  reader.addEventListener('loadstart', () => {
    start = performance.now();
    console.log('loadstart');
  });
  reader.addEventListener('progress', (e) => {
    if (e.lengthComputable) console.log(`progress ${Math.round(e.loaded / e.total * 100)} %`);
  });
  reader.addEventListener('load', () => resolve(reader.result));
  reader.addEventListener('error', () => reject(reader.error));
  reader.addEventListener('loadend', () => {
    console.log(`loadend nach ${(performance.now() - start).toFixed(1)} ms`);
  });

  reader.readAsArrayBuffer(blob);
});

const buffer = await readFile(new Blob([new Uint8Array(1024)]));
console.log('Bytes:', buffer.byteLength);

loadstart progress 100 % loadend nach 0.8 ms Bytes: 1024

// Wichtig · Fallstricke

Listener vor dem Lesen registrieren: Das Ereignis wird asynchron ausgelöst, trotzdem sollte der Handler vor dem Aufruf von readAs…() gesetzt werden, damit er sicher nicht verpasst wird.
Innerhalb von loadstart ist reader.result immer null. Auf das Ergebnis greifst du erst in load oder loadend zu.
Ruft man auf einem FileReader, der gerade liest (readyState === 1), erneut readAs…() auf, wirft der Browser einen InvalidStateError. In diesem Fall wird kein zweites loadstart ausgelöst.
reader.abort() ist auch direkt im loadstart-Handler erlaubt. Danach folgen abort und loadend.
Bei kleinen Dateien folgen loadstart und loadend fast sofort aufeinander. Ein Spinner blitzt dann nur kurz auf, deshalb lohnt sich eventuell eine kleine Verzögerung vor dem Einblenden.
Kompatibilität: Das Ereignis wird von allen modernen Browsern unterstützt und steht auch in Web Workern zur Verfügung. Für einfache Fälle sind Blob.prototype.text() und arrayBuffer() mit Promises eine Alternative, sie haben aber keine Fortschrittsereignisse.

Siehe auch

FileReader FileReader: progress FileReader: load FileReader: loadend FileReader: abort ProgressEvent