JavaScript File und FileReader

Web-Apps müssen regelmäßig mit Dateien arbeiten, die der Nutzer auswählt: ein Textdokument lesen, ein Bild vor dem Hochladen in der Vorschau anzeigen oder Binärdaten im Browser verarbeiten. JavaScript bewältigt dies mit zwei verwandten Schnittstellen. Das File-Interface beschreibt eine einzelne Datei (ihren Namen, ihre Größe und ihren Typ), und das FileReader-Interface liest den Inhalt dieser Datei asynchron aus, ohne sie jemals an einen Server zu senden.

Dieser Leitfaden zeigt, wie man eine File aus einem <input>-Element holt, sie mit FileReader ausliest und die neueren Promise-basierten Methoden file.text() und file.arrayBuffer() nutzt. Eine File ist eine spezialisierte Art von Blob, daher gilt das meiste, was hier gelernt wird, auch für Blobs; eine vollständige Übersicht bietet der Artikel zur File API.

Das File-Interface in JavaScript verstehen

Das File-Interface repräsentiert die Daten einer einzelnen Datei. Dateien stammen üblicherweise aus einem <input type="file">-Element, einer Drag-and-Drop-Operation oder der Clipboard API. Da eine File von Blob erbt, enthält sie sowohl den Dateiinhalt als auch Metadaten darüber.

Wichtige Eigenschaften des File-Interfaces

• name: Der Dateiname als string, z. B. "report.pdf".
• size: Die Dateigröße in Bytes (eine Zahl).
• type: Der MIME-Typ als string, z. B. "image/png". Kann "" sein, wenn der Browser ihn nicht bestimmen kann.
• lastModified: Ein Zeitstempel (Millisekunden seit der Unix-Epoche), der angibt, wann die Datei zuletzt geändert wurde.

Dateien aus einem Input-Element holen

Ein <input>-Element für Dateien stellt eine files-Eigenschaft bereit — eine FileList, die sich wie ein array verhält. Verwende event.target.files[0] für die erste Datei oder setze das multiple-Attribut und durchlaufe files in einer Schleife, um mehrere Dateien auf einmal zu verarbeiten.

Beispiel: Dateiinformationen anzeigen

So lassen sich Informationen über eine vom Nutzer ausgewählte Datei anzeigen:

<input type="file" id="fileInput" />
<div id="fileInfo"></div>

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return; // user cancelled the dialog
  const modified = new Date(file.lastModified).toLocaleString();
  const info = `File Name: ${file.name}<br>
    File Size: ${file.size} bytes<br>
    File Type: ${file.type || 'unknown'}<br>
    Last Modified: ${modified}`;
  document.getElementById('fileInfo').innerHTML = info;
});

Die FileReader API nutzen

Das FileReader-Interface liest den Inhalt einer File oder eines Blob asynchron aus. Man startet einen Lesevorgang mit einer der readAs…-Methoden und verarbeitet das Ergebnis über Events — die eigentlichen Daten blockieren dabei nie den Haupt-Thread.

FileReader-Methoden

• readAsText(file): Liest die Datei als Textstring (optional mit einer bestimmten Zeichenkodierung).
• readAsDataURL(file): Liest die Datei als base64-kodierten Daten-URL — praktisch für <img src>-Vorschauen.
• readAsArrayBuffer(file): Liest die Datei als ArrayBuffer von Rohbytes für die binäre Verarbeitung.

FileReader-Events

Da das Lesen asynchron ist, werden die Handler vor dem Aufruf einer readAs…-Methode angehängt:

• onload: Wird ausgelöst, wenn der Lesevorgang erfolgreich abgeschlossen ist; die Daten befinden sich in reader.result (auch als event.target.result verfügbar).
• onerror: Wird ausgelöst, wenn der Lesevorgang fehlschlägt; reader.error enthält die Fehlerinformation.
• onprogress: Wird während des Lesevorgangs periodisch ausgelöst; event.loaded und event.total ermöglichen die Anzeige eines Fortschrittsbalkens für große Dateien.

Beispiel: Eine Textdatei lesen

Das folgende Beispiel liest eine Textdatei mit FileReader und zeigt ihren Inhalt einschließlich eines Fortschrittsprozentsatzes an:

<input type="file" id="textInput" />
<div id="textOutput">Upload a text file please</div>

document.getElementById('textInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return;
  const output = document.getElementById('textOutput');
  const reader = new FileReader();
  reader.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = Math.round((e.loaded / e.total) * 100);
      output.textContent = `Reading… ${percent}%`;
    }
  };
  reader.onload = function(e) {
    output.textContent = e.target.result;
  };
  reader.onerror = function() {
    output.textContent = 'Error reading file: ' + reader.error;
  };
  reader.readAsText(file);
});

Erweitertes Dateilesen: Verschiedene Datentypen verarbeiten

Bilder als Daten-URLs lesen

Um eine vom Nutzer ausgewählte Bilddatei anzuzeigen, kann man sie mit der Methode readAsDataURL als Daten-URL einlesen. Diese Methode kodiert die Datei als base64-kodierten string, der direkt in Bildelementen verwendet werden kann.

Beispiel: Ein Bild anzeigen

<input type="file" id="imageInput" />
<div>Select an image file, please.</div>
<img id="imageDisplay" />

document.getElementById('imageInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('imageDisplay').src = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('imageDisplay').style.display = 'none';
    alert('Error reading image file.');
  };
  reader.readAsDataURL(file);
});

Binärdateien mit ArrayBuffer lesen

Für Anwendungen, die Audio, Video oder beliebige Binärdaten verarbeiten müssen, ist das Einlesen der Datei als ArrayBuffer unverzichtbar. Diese Methode liefert einen generischen Puffer mit Binärdaten, der verändert oder an andere APIs wie Web Audio oder WebGL weitergegeben werden kann.

Beispiel: Binärdaten verarbeiten

<input type="file" id="binaryInput" />
<div id="binaryOutput">Select any file.</div>

document.getElementById('binaryInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const buffer = e.target.result;
    // Process the binary data
    const info = `Buffer Length: ${buffer.byteLength} bytes`;
    document.getElementById('binaryOutput').innerHTML = info;
  };
  reader.onerror = function() {
    document.getElementById('binaryOutput').innerHTML = 'Error reading binary file.';
  };
  reader.readAsArrayBuffer(file);
});

Der moderne Weg: file.text() und file.arrayBuffer()

FileReader stammt aus der Zeit vor Promises, daher kann seine Event-basierte API schnell umständlich werden. Alle modernen Browser stellen Promise-zurückgebende Methoden direkt auf File/Blob zur Verfügung, sodass man mit async/await lesen kann:

• file.text(): Löst sich mit dem Dateiinhalt als UTF-8-string auf.
• file.arrayBuffer(): Löst sich mit einem ArrayBuffer der Rohbytes auf.
• file.stream(): Gibt einen ReadableStream zurück, um sehr große Dateien stückweise zu verarbeiten.

<input type="file" id="modernInput" />

document.getElementById('modernInput').addEventListener('change', async function(event) {
  const file = event.target.files[0];
  if (!file) return;
  try {
    const text = await file.text();
    console.log('First 100 characters:', text.slice(0, 100));

    const buffer = await file.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    console.log('Total bytes:', bytes.length);
    console.log('First byte:', bytes[0]);
  } catch (err) {
    console.error('Could not read file:', err);
  }
});

Für neuen Code sollte man diese Promise-Methoden bevorzugen — sie lassen sich sauber mit async/await und try/catch kombinieren. FileReader ist dann sinnvoll, wenn onprogress-Events benötigt werden oder sehr alte Browser unterstützt werden müssen. Um Dateien in wiederaufnehmbaren Blöcken an einen Server zu senden, kombiniert man file.slice() mit diesen Lesemethoden — siehe wiederaufnehmbare Dateiuploads.

Fazit

Das File-Interface gibt Auskunft über eine Datei (Name, Größe, Typ, lastModified), während FileReader und die neueren Promises file.text() / file.arrayBuffer() das Lesen des Inhalts ermöglichen — ohne einen Roundtrip zum Server. Zusammen decken sie die häufigsten Anforderungen ab: Datei-Metadaten anzeigen, Bilder in der Vorschau darstellen, Text parsen und Binärdaten vollständig im Browser verarbeiten.

Weiterführende Informationen bieten der verwandte Typ Blob, auf dem File aufbaut, sowie die umfassendere File API.

Übungen