new FileReader() — Methode · JavaScript-Referenz

Signatur

new FileReader()

Beschreibung

Mit new FileReader() legst du ein Lese-Objekt an, das den Inhalt eines Blob oder File asynchron einliest – etwa eine Datei, die über <input type="file">, per Drag & Drop oder über fetch().then(r => r.blob()) zur Verfügung steht. Der Konstruktor nimmt keine Argumente. Erst über die Lesemethoden readAsText(), readAsDataURL(), readAsArrayBuffer() oder die veraltete readAsBinaryString() wird der Lesevorgang gestartet.

Das Ergebnis kommt ereignisbasiert: Nach dem Aufruf einer Lesemethode feuert das Objekt die Ereignisse loadstart, progress, load (bzw. error oder abort) und zum Schluss loadend. Das Ergebnis steht dann in reader.result, ein eventueller Fehler in reader.error. Den aktuellen Zustand liefert reader.readyState (0 = EMPTY, 1 = LOADING, 2 = DONE).

In modernem Code greift man oft zu den Promise-basierten Methoden Blob.prototype.text(), arrayBuffer() oder stream(). FileReader ist aber weiterhin sinnvoll, wenn du Fortschrittsereignisse für große Dateien brauchst, eine Data-URL erzeugen willst (z. B. für eine Bildvorschau) oder einen Lesevorgang mit abort() abbrechen möchtest.

Rückgabewert

Typ

FileReader

Beschreibung

Ein neues FileReader-Objekt mit readyState 0 (EMPTY) und result gleich null.

Beispiele

Textdatei aus einem Dateiauswahlfeld einlesen

// HTML: <input type="file" id="datei" accept=".txt,.csv">
const input = document.querySelector('#datei');

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

  const reader = new FileReader();

  reader.addEventListener('load', () => {
    console.log(`Inhalt von ${file.name}:`);
    console.log(reader.result);
  });

  reader.addEventListener('error', () => {
    console.error('Lesefehler:', reader.error);
  });

  reader.readAsText(file, 'UTF-8');
});

Inhalt von notizen.txt: Hallo Welt!

Bildvorschau per Data-URL

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

bildInput.onchange = () => {
  const file = bildInput.files[0];
  if (!file || !file.type.startsWith('image/')) return;

  const reader = new FileReader();
  reader.onload = () => {
    vorschau.src = reader.result; // "data:image/png;base64,..."
  };
  reader.readAsDataURL(file);
};

FileReader in ein Promise verpacken (mit Fortschritt)

const readFileAsArrayBuffer = (blob, onProgress) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.onabort = () => reject(new DOMException('Abgebrochen', 'AbortError'));
    reader.onprogress = (e) => {
      if (e.lengthComputable) onProgress?.(Math.round((e.loaded / e.total) * 100));
    };
    reader.readAsArrayBuffer(blob);
  });

const blob = new Blob(['Hallo FileReader'], { type: 'text/plain' });
const buffer = await readFileAsArrayBuffer(blob, (p) => console.log(`${p} %`));
console.log(buffer.byteLength);

100 % 16

// Wichtig · Fallstricke

Nur ein Lesevorgang gleichzeitig: Rufst du eine readAs…()-Methode auf, während readyState noch 1 (LOADING) ist, wird ein InvalidStateError geworfen. Für mehrere Dateien parallel lege jeweils eine eigene Instanz an.
Ergebnis nicht synchron: reader.result ist direkt nach dem Aufruf der Lesemethode noch null. Lies den Wert erst im load- oder loadend-Handler aus.
Kein Zugriff auf das Dateisystem: FileReader liest nur Blob/File-Objekte, die der Nutzer ausgewählt hat oder die im Code erzeugt wurden – Pfade wie C:\datei.txt gehen nicht. In Node.js nutzt man stattdessen fs; ein globales FileReader gibt es dort erst in neueren Versionen nicht standardmäßig.
Speicher: readAsDataURL() erzeugt Base64-Strings, die rund 33 % größer sind als die Datei. Für Vorschaubilder ist URL.createObjectURL() meist schneller und sparsamer (danach mit URL.revokeObjectURL() freigeben).
Sicherheit: Eingelesenen Text niemals ungeprüft per innerHTML ins DOM schreiben – sonst droht XSS. Verwende textContent.
readAsBinaryString() gilt als veraltet; nutze readAsArrayBuffer().
Für einfache Fälle ohne Fortschrittsanzeige sind await blob.text() bzw. await blob.arrayBuffer() kürzer (Baseline seit 2020).
In Web Workern gibt es zusätzlich den synchronen FileReaderSync.

Siehe auch

FileReader FileReader.prototype.readAsText() FileReader.prototype.readAsDataURL() FileReader.prototype.readAsArrayBuffer() FileReader.result Blob File URL.createObjectURL()