FileReader.result — Eigenschaft · JavaScript-Referenz

Signatur

FileReader.result

Beschreibung

FileReader.result enthält das Ergebnis eines Lesevorgangs, den eine der Lesemethoden des FileReader gestartet hat. Welchen Typ der Wert hat, hängt von der aufgerufenen Methode ab:

readAsText(): string mit dem dekodierten Text (Standard ist UTF-8)
readAsDataURL(): string im Format data:<MIME-Typ>;base64,<Daten>
readAsArrayBuffer(): ArrayBuffer mit den Rohbytes
readAsBinaryString() (veraltet): string, in dem jedes Zeichen ein Byte darstellt

Das Lesen läuft asynchron ab. Einen sinnvollen Wert enthält result erst, wenn das Ereignis load (oder loadend ohne Fehler) ausgelöst wurde und readyState auf FileReader.DONE (2) steht. Solange noch gelesen wird, nach einem Fehler oder nach abort() ist der Wert null.

Man verwendet result zum Beispiel, um vom Benutzer ausgewählte Dateien vor dem Hochladen als Bildvorschau anzuzeigen, um CSV- oder JSON-Dateien direkt im Browser auszuwerten oder um Binärformate byteweise zu untersuchen.

Rückgabewert

Typ

string | ArrayBuffer | null

Beschreibung

Der Dateiinhalt im Format der zuletzt aufgerufenen Lesemethode. null, solange der Lesevorgang läuft, fehlgeschlagen ist oder abgebrochen wurde.

Beispiele

Bildvorschau mit readAsDataURL

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

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

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    // result ist hier eine Data-URL
    preview.src = reader.result;
    console.log(reader.result.slice(0, 30));
  });
  reader.readAsDataURL(file);
});

data:image/png;base64,iVBORw0K

JSON-Datei als Text lesen – als Promise gekapselt

const readFileAsText = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file, 'utf-8');
  });

const blob = new Blob(['{"name":"Anna","alter":32}'], { type: 'application/json' });

const text = await readFileAsText(blob);
const daten = JSON.parse(text);
console.log(daten.name, daten.alter);

Anna 32

Dateisignatur mit readAsArrayBuffer prüfen

const istPng = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      // result ist ein ArrayBuffer
      const bytes = new Uint8Array(reader.result);
      const signatur = [0x89, 0x50, 0x4e, 0x47];
      resolve(signatur.every((b, i) => bytes[i] === b));
    };
    reader.onerror = () => reject(reader.error);
    // Nur die ersten 4 Bytes lesen
    reader.readAsArrayBuffer(file.slice(0, 4));
  });

const fake = new Blob([new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d])]);
console.log(await istPng(fake));

true

result ist vor dem load-Ereignis noch null

const reader = new FileReader();
reader.readAsText(new Blob(['Hallo Welt']));

console.log(reader.result);     // Lesen läuft noch
console.log(reader.readyState); // 1 = LOADING

reader.onloadend = () => {
  console.log(reader.result);   // jetzt verfügbar
};

null 1 Hallo Welt

// Wichtig · Fallstricke

Asynchronität: Wer result direkt nach dem Aufruf von readAsText() o. Ä. abfragt, bekommt null. Den Wert immer erst in onload bzw. loadend auswerten.
Typ prüfen: Der Typ hängt von der Lesemethode ab. Bei readAsArrayBuffer() braucht man für den Bytezugriff eine Ansicht wie Uint8Array oder DataView.
Fehlerfall: Nach einem Fehler ist result gleich null. Die Ursache steht in FileReader.error.
Speicher und Leistung: Data-URLs sind etwa 33 % größer als die Originaldatei. Für Bildvorschauen großer Dateien ist URL.createObjectURL() meist die bessere Wahl. Für einfaches Lesen gibt es inzwischen die Promise-basierten Methoden Blob.prototype.text() und Blob.prototype.arrayBuffer().
Sicherheit: Den Inhalt von readAsText() niemals ungeprüft per innerHTML einfügen, sonst droht XSS. Besser textContent verwenden.
readAsBinaryString() ist veraltet. Stattdessen readAsArrayBuffer() verwenden.
Kompatibilität: Wird von allen modernen Browsern und in Web Workern unterstützt. Node.js bietet FileReader erst ab Version 20 als globales Objekt an.

Siehe auch

Blob.prototype.text() FileReader.error FileReader.readyState IDBRequest.result FileSystem.root