JavaScript-Datei und FileReader

In der modernen Webentwicklungslandschaft ist die effiziente und sichere Verwaltung von Dateien unerlässlich. JavaScript, das für das clientseitige Scripting zentral ist, bietet mit den Schnittstellen File und FileReader leistungsstarke Werkzeuge. Dieser Leitfaden bietet einen detaillierten Einblick in diese Werkzeuge und vermittelt Entwicklern die Fähigkeiten, Dateien in Webanwendungen reibungslos zu verarbeiten.

Die File-Schnittstelle in JavaScript verstehen

Die File-Schnittstelle in JavaScript ist ein Objekt, das Dateidaten repräsentiert. Dateien stammen typischerweise aus <input type="file">-Elementen, Drag-and-Drop-Operationen oder der Clipboard API. Diese Schnittstelle stellt Standardinformationen wie Name, Größe und MIME-Typ sowie Methoden zum Zugriff auf den Inhalt der Datei bereit.

Wichtige Eigenschaften der File-Schnittstelle

• name: Der Name der Datei als Zeichenkette.
• size: Die Größe der Datei in Bytes.
• type: Der MIME-Typ der Datei als Zeichenkette.

Beispiel: Dateiinformationen anzeigen

Hier ist eine einfache Möglichkeit, Informationen über eine vom Benutzer ausgewählte Datei anzuzeigen:

---

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

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const info = `File Name: ${file.name} <br> File Size: ${file.size} bytes<br> File Type: ${file.type}`;
  document.getElementById('fileInfo').innerHTML = info;
});

Try it Yourself »

Die FileReader-API nutzen

Die FileReader-API ermöglicht es Webanwendungen, den Inhalt von Dateien (oder Rohdatenpuffern) zu lesen, die auf dem Computer des Benutzers gespeichert sind, indem File- oder Blob-Objekte verwendet werden, um die zu lesende Datei oder Datenquelle anzugeben.

FileReader-Methoden

• readAsDataURL(): Liest die Datei als Data-URL.
• readAsText(): Liest die Datei als Text.
• readAsArrayBuffer(): Liest die Datei als ArrayBuffer.

Beispiel: Eine Textdatei lesen

Das folgende Beispiel zeigt, wie man mit FileReader eine Textdatei liest und ihren Inhalt auf der Webseite anzeigt:

---

<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];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('textOutput').innerHTML = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('textOutput').innerHTML = 'Error reading file.';
  };
  reader.readAsText(file);
});

Try it Yourself »

Erweiterte Dateiverarbeitung: Verschiedene Datentypen handhaben

Bilder als Data-URLs lesen

Um eine vom Benutzer ausgewählte Bilddatei anzuzeigen, können Sie sie mit der Methode readAsDataURL als Data-URL lesen. Diese Methode kodiert die Datei als base64-kodierte Zeichenkette, die 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);
});

Try it Yourself »

Binärdateien mit ArrayBuffer lesen

Für Anwendungen, die Audio, Video oder beliebige Binärdaten verarbeiten müssen, ist das Lesen der Datei als ArrayBuffer unerlässlich. Diese Methode stellt einen generischen Puffer für Binärdaten bereit, der bearbeitet oder an andere APIs wie Web Audio oder WebGL übergeben 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);
});

Try it Yourself »

Fazit

Durch das Verstehen und Implementieren der File- und FileReader-Schnittstellen in JavaScript können Entwickler die Interaktion ihrer Webanwendungen mit Benutzerdaten verbessern. Diese APIs bieten die notwendigen Werkzeuge, um Dateieingaben zu verarbeiten, Dateiinhalte zu lesen und Daten effektiv zu nutzen, wodurch eine reichhaltigere und interaktivere Benutzererfahrung gewährleistet wird.

Hinweis: Moderne Browser unterstützen außerdem file.text() und file.arrayBuffer() für einfacheres asynchrones Lesen ohne die FileReader-API.

Übung

What are the functionalities of File and FileReader interfaces in JavaScript?

The File interface provides information about files.The FileReader interface assists in a web application's asynchronous reading of files stored on the user's computer.The File interface saves files in the user's computer.The FileReader interface can create new files in the file system.