FileReader.readAsText() — Methode · JavaScript-Referenz

Signatur

FileReader.prototype.readAsText(blob, encoding)

Beschreibung

readAsText() startet einen asynchronen Lesevorgang für einen Blob oder eine File (z. B. aus einem <input type="file"> oder per Drag & Drop). Die Methode selbst gibt nichts zurück. Ist das Lesen fertig, steht readyState auf DONE (2), das load-Ereignis wird ausgelöst und in result steht der dekodierte Inhalt als String.

Über den optionalen Parameter encoding legst du fest, mit welcher Zeichenkodierung die Bytes dekodiert werden, z. B. "UTF-8", "ISO-8859-1" oder "windows-1252". Ohne Angabe gilt UTF-8. Ein vorhandenes BOM (Byte Order Mark) hat dabei Vorrang vor dem angegebenen Wert.

Gut geeignet ist die Methode für Textdateien wie CSV, JSON, Markdown, Logdateien oder Konfigurationsdateien, die du direkt im Browser verarbeiten willst, ohne sie hochzuladen. Für Binärdaten verwendest du stattdessen readAsArrayBuffer(), für Bildvorschauen readAsDataURL() oder URL.createObjectURL().

In modernem Code ist Blob.prototype.text() oft die einfachere Wahl, weil sie direkt ein Promise<string> liefert. Allerdings kann sie nur UTF-8. readAsText() brauchst du also, wenn du eine andere Kodierung angeben, den Fortschritt über progress-Ereignisse anzeigen oder den Vorgang mit abort() abbrechen willst.

Parameter

Name	Typ	Default	Beschreibung
$blob Pflicht	Blob \| File		Der `Blob` bzw. die `File`, deren Inhalt als Text gelesen werden soll.
$encoding	string	"UTF-8"	Name der Zeichenkodierung, mit der die Bytes dekodiert werden, z. B. `"UTF-8"`, `"ISO-8859-1"`, `"windows-1252"` oder `"UTF-16LE"`. Ein unbekanntes Label führt zum Rückfall auf UTF-8.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Der gelesene Text steht nach dem load-Ereignis als string in FileReader.result.

Beispiele

Textdatei aus einem Datei-Input anzeigen

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

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

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    // textContent statt innerHTML, damit kein HTML ausgeführt wird
    ausgabe.textContent = reader.result;
    console.log(`${file.name}: ${reader.result.length} Zeichen gelesen`);
  });
  reader.addEventListener('error', () => {
    console.error('Lesefehler:', reader.error);
  });
  reader.readAsText(file);
});

notizen.txt: 1532 Zeichen gelesen

Als Promise kapseln und JSON parsen

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

// Datei im Speicher erzeugen, damit das Beispiel ohne Input läuft
const file = new File(['{"name":"Anna","alter":34}'], 'user.json', {
  type: 'application/json'
});

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

Anna 34

Windows-CSV mit Umlauten korrekt dekodieren

// "Größe;Maß" in windows-1252: ö = 0xF6, ß = 0xDF
const bytes = new Uint8Array([0x47, 0x72, 0xF6, 0xDF, 0x65, 0x3B, 0x4D, 0x61, 0xDF]);
const blob = new Blob([bytes], { type: 'text/csv' });

const reader = new FileReader();
reader.onload = () => {
  const spalten = reader.result.split(';');
  console.log(spalten);
};
reader.readAsText(blob, 'windows-1252');

// Ohne Kodierungsangabe (UTF-8) kämen Ersatzzeichen: "Gr��e"

["Größe", "Maß"]

Fortschritt anzeigen und Lesen abbrechen

const reader = new FileReader();
const bigFile = new Blob(['x'.repeat(50_000_000)], { type: 'text/plain' });

reader.onprogress = (e) => {
  if (e.lengthComputable) {
    console.log(`Fortschritt: ${Math.round((e.loaded / e.total) * 100)} %`);
  }
};
reader.onabort = () => console.log('Lesen abgebrochen');
reader.onloadend = () => console.log('readyState:', reader.readyState);

reader.readAsText(bigFile);
// z. B. über einen Abbrechen-Button:
setTimeout(() => reader.abort(), 10);

Lesen abgebrochen readyState: 2

// Wichtig · Fallstricke

Asynchron: Direkt nach dem Aufruf ist reader.result noch null. Greife erst in load oder loadend darauf zu.
Kein paralleles Lesen: Rufst du eine readAs…-Methode auf, während der Reader noch liest (readyState === 1), wird eine InvalidStateError-DOMException geworfen. Für mehrere Dateien gleichzeitig brauchst du also mehrere FileReader-Instanzen.
Kodierung: Ohne Angabe wird als UTF-8 dekodiert. Dateien aus älteren Windows-Programmen (z. B. CSV-Export aus Excel) sind oft windows-1252-kodiert, dann werden Umlaute zu �. Die Kodierung lässt sich nicht automatisch erkennen; nur ein BOM wird ausgewertet.
Speicher: Die ganze Datei landet als String im Speicher. Bei sehr großen Dateien teilst du sie besser mit Blob.prototype.slice() in Stücke oder liest sie über blob.stream() zusammen mit TextDecoderStream.
Sicherheit: Behandle Dateiinhalte als nicht vertrauenswürdige Eingabe. Gib sie mit textContent aus, nicht mit innerHTML, sonst riskierst du XSS.
Kompatibilität: Wird von allen modernen Browsern unterstützt und ist auch in Web Workern verfügbar. Node.js hat keinen FileReader; dort nimmst du fs.readFile() oder blob.text(). Für einfache UTF-8-Fälle ist await blob.text() die modernere Alternative.

Siehe auch

Blob.text() File FileReader.readAsDataURL() FileReader.abort() FileReader.readAsArrayBuffer()