JavaScript Academy · Lektion

Dateien mit FileReader lesen

Lesen Sie ausgewählte Dateien als Text oder Daten-URLs ein.

Dateien mit FileReader lesen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist FileReader?

FileReader ist eine Browser-API, die den Inhalt von File- und Blob-Objekten asynchron liest. Sie erhalten eine Datei aus einem <input type="file"> und lesen sie als Text, Data-URL oder Binärdaten ein.

Datei aus einem Eingabefeld abrufen

Ein Datei-Eingabefeld stellt eine files-Liste bereit. Die erste ausgewählte Datei befindet sich am Index 0 und verfügt über nützliche Eigenschaften wie name, size und type.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

Lesen erfolgt asynchron

FileReader gibt die Daten nicht direkt zurück. Verknüpfen Sie zunächst einen onload-Handler und rufen Sie anschließend eine Lesemethode auf. Das Ergebnis steht später in reader.result bereit.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText decodiert die Datei als Textzeichenfolge und eignet sich ideal für .txt-, .csv- oder JSON-Dateien.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL erzeugt eine Base64-data:-URL. Das eignet sich ideal für die Vorschau eines Bildes, indem Sie die URL img.src zuweisen.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer liefert rohe Binärdaten als ArrayBuffer, was zum byteweisen Parsen von Dateiformaten nützlich ist.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Fehler behandeln

Verknüpfen Sie einen onerror-Handler, um Lesefehler abzufangen, etwa wenn eine Datei nicht gelesen werden kann.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

Fortschritt verfolgen

Bei großen Dateien meldet das onprogress-Ereignis, wie viele Bytes bisher geladen wurden. Das ist beispielsweise für Fortschrittsbalken nützlich.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

In ein Promise verpacken

Die ereignisbasierte API ist umständlich. Verpacken Sie sie in ein Promise, damit Sie await für übersichtlicheren Code verwenden können.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Moderne Alternative: file.text()

Moderne Browser ermöglichen es, direkt file.text(), file.arrayBuffer() oder file.stream() aufzurufen. Diese Methoden geben Promises zurück und sind in vielen Fällen einfacher als FileReader.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

Warum FileReader wichtig ist

Mit FileReader können Sie vom Benutzer ausgewählte Dateien vollständig im Browser verarbeiten: Bilder in der Vorschau anzeigen, CSV-Dateien parsen oder Uploads vor dem Senden prüfen. Wählen Sie die Lesemethode passend zu den benötigten Daten: Text, Data-URL oder Binärdaten. Als Nächstes erkunden Sie Blobs und Objekt-URLs.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Schnelltest

Welche FileReader-Methode liefert eine Base64-Zeichenfolge, die für das src einer Bildvorschau geeignet ist?

Zusammenfassung: Dateien lesen

Sie haben gelernt, Dateiinhalte zu lesen:

Rufen Sie Dateien über input.files ab. Das Lesen erfolgt asynchron über onload.
readAsText, readAsDataURL und readAsArrayBuffer liefern unterschiedliche Formate.
Behandeln Sie onerror und onprogress, um den Code robuster zu machen.
Die modernen Methoden file.text() und file.arrayBuffer() sind Promise-basierte Alternativen.

Häufig gestellte Fragen

Ist die Lektion „Dateien mit FileReader lesen“ kostenlos?

Ja — der vollständige Text von „Dateien mit FileReader lesen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Dateien mit FileReader lesen“?

Lesen Sie ausgewählte Dateien als Text oder Daten-URLs ein. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Dateien mit FileReader lesen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy