FileReader: load — Ereignis · JavaScript-Referenz

Signatur

fileReader.addEventListener("load", handler)

Beschreibung

Das load-Ereignis eines FileReader tritt ein, sobald ein Lesevorgang über readAsText(), readAsDataURL(), readAsArrayBuffer() oder readAsBinaryString() erfolgreich beendet wurde. Erst jetzt enthält reader.result die gelesenen Daten, und reader.readyState hat den Wert 2 (DONE).

Du kannst den Handler per addEventListener("load", handler) registrieren oder über die Eigenschaft reader.onload = handler zuweisen. Der Handler bekommt ein ProgressEvent, dessen target der FileReader selbst ist. Die Eigenschaften loaded und total geben die Anzahl der gelesenen Bytes an.

Die Reihenfolge der Ereignisse ist: loadstart → progress (keinmal oder mehrmals) → load oder error/abort → loadend. Das load-Ereignis wird also nur bei Erfolg ausgelöst. Wenn du unabhängig vom Ausgang aufräumen willst, nimm loadend.

Typische Einsatzfälle sind eine Bildvorschau vor dem Hochladen, das Einlesen von CSV- oder JSON-Dateien im Browser und die Verarbeitung von Binärdaten mit ArrayBuffer. In modernem Code ist oft auch Blob.prototype.text() bzw. arrayBuffer() mit await eine schlankere Alternative.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"load"`.
$handler Pflicht	(event: ProgressEvent<FileReader>) => void		Callback-Funktion, die ein `ProgressEvent` erhält. `event.target.result` enthält die gelesenen Daten.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `{ once: true }` oder `{ signal }`, um den Listener automatisch zu entfernen.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Die gelesenen Daten stehen in reader.result (string oder ArrayBuffer, je nach Lesemethode).

Beispiele

Bildvorschau mit addEventListener

// HTML: <input type="file" id="bild" accept="image/*"> <img id="vorschau">
const input = document.querySelector('#bild');
const vorschau = document.querySelector('#vorschau');

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

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    vorschau.src = event.target.result; // Data-URL
    console.log(`Geladen: ${event.loaded} Bytes`);
  }, { once: true });

  reader.readAsDataURL(datei);
});

Geladen: 48213 Bytes

Textdatei über die onload-Eigenschaft einlesen

const reader = new FileReader();
const datei = new File(['name,alter\nAnna,31\nBen,27'], 'personen.csv', { type: 'text/csv' });

reader.onload = () => {
  const zeilen = reader.result.split('\n').slice(1);
  const personen = zeilen.map((z) => {
    const [name, alter] = z.split(',');
    return { name, alter: Number(alter) };
  });
  console.log(personen);
};

reader.onerror = () => console.error('Fehler:', reader.error);

reader.readAsText(datei, 'UTF-8');

[ { name: 'Anna', alter: 31 }, { name: 'Ben', alter: 27 } ]

load-Ereignis als Promise kapseln

const leseAlsArrayBuffer = (blob) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => resolve(reader.result), { once: true });
  reader.addEventListener('error', () => reject(reader.error), { once: true });
  reader.readAsArrayBuffer(blob);
});

const blob = new Blob([new Uint8Array([0x89, 0x50, 0x4e, 0x47])]);
const buffer = await leseAlsArrayBuffer(blob);
console.log(new Uint8Array(buffer));

Uint8Array(4) [137, 80, 78, 71]

Listener mit removeEventListener entfernen

const reader = new FileReader();

const onLoad = () => {
  console.log('Inhalt:', reader.result);
  reader.removeEventListener('load', onLoad);
};

reader.addEventListener('load', onLoad);
reader.readAsText(new Blob(['Hallo Welt']));

Inhalt: Hallo Welt

// Wichtig · Fallstricke

Nur bei Erfolg: load wird bei Fehlern oder nach abort() nicht ausgelöst. Registriere deshalb immer auch einen Handler für error, sonst schlagen Fehler unbemerkt fehl.
Reihenfolge: Registriere den Handler vor dem Aufruf von readAs…(). Ein FileReader darf nicht gleichzeitig zwei Lesevorgänge ausführen, sonst wird ein InvalidStateError geworfen.
onload und addEventListener: Wenn du reader.onload neu zuweist, wird der vorherige Handler überschrieben. Mit addEventListener sind mehrere Handler möglich.
Speicher und Leistung: Bei großen Dateien erzeugt readAsDataURL() sehr lange Base64-Zeichenketten, etwa 33 % größer als die Datei. Für eine Vorschau ist URL.createObjectURL() meist effizienter.
Sicherheit: Behandle gelesenen Text als nicht vertrauenswürdig. Füge ihn nicht per innerHTML ein (XSS-Gefahr), sondern nutze textContent. Data-URLs von SVG-Dateien können Skripte enthalten.
Kompatibilität: Wird von allen modernen Browsern und in Web Workern unterstützt. Node.js hat keinen FileReader; nutze dort Blob.prototype.text() oder fs.

Siehe auch

FileReader FileReader.result FileReader.prototype.readAsDataURL() FileReader.prototype.readAsText() Blob.prototype.text() ProgressEvent