FileReader

FileReader()

Gibt ein neues FileReader-Objekt zurück.

Siehe Verwendung von Dateien aus Webanwendungen für Details und Beispiele.

FileReader.error Schreibgeschützt

Ein DOMException, das den Fehler darstellt, der beim Lesen der Datei aufgetreten ist.

FileReader.readyState Schreibgeschützt

Eine Zahl, die den Zustand des FileReader anzeigt. Dies ist einer der folgenden:

Name	Wert	Beschreibung
EMPTY	0	Noch keine Daten geladen.
LOADING	1	Daten werden aktuell geladen.
DONE	2	Der gesamte Lesevorgang wurde abgeschlossen.

FileReader.result Schreibgeschützt

Der Inhalt der Datei. Diese Eigenschaft ist erst nach Abschluss des Lesevorgangs gültig, und das Datenformat hängt davon ab, welche Methode verwendet wurde, um den Lesevorgang zu starten.

FileReader.abort()

Bricht den Lesevorgang ab. Nach der Rückkehr wird der readyState auf DONE gesetzt.

FileReader.readAsArrayBuffer()

Beginnt mit dem Lesen des Inhalts des angegebenen Blob. Nach Abschluss enthält das result-Attribut einen ArrayBuffer, der die Daten der Datei darstellt.

FileReader.readAsBinaryString() Veraltet

Beginnt mit dem Lesen des Inhalts des angegebenen Blob. Nach Abschluss enthält das result-Attribut die Roh-Binärdaten der Datei als String.

FileReader.readAsDataURL()

Beginnt mit dem Lesen des Inhalts des angegebenen Blob. Nach Abschluss enthält das result-Attribut eine data:-URL, die die Daten der Datei darstellt.

FileReader.readAsText()

Beginnt mit dem Lesen des Inhalts des angegebenen Blob. Nach Abschluss enthält das result-Attribut den Inhalt der Datei als Text-String. Ein optionaler Name der Kodierung kann angegeben werden.

Hören Sie diese Ereignisse mit addEventListener() ab oder indem Sie einen Ereignis-Listener der oneventname-Eigenschaft dieses Interfaces zuweisen. Entfernen Sie die Ereignis-Listener mit removeEventListener(), sobald FileReader nicht mehr verwendet wird, um Speicherlecks zu vermeiden.

abort

Wird ausgelöst, wenn ein Lesevorgang abgebrochen wurde, beispielsweise weil das Programm FileReader.abort() aufgerufen hat.

error

Wird ausgelöst, wenn das Lesen aufgrund eines Fehlers fehlgeschlagen ist.

load

Wird ausgelöst, wenn ein Lesevorgang erfolgreich abgeschlossen wurde.

loadend

Wird ausgelöst, wenn ein Lesevorgang abgeschlossen wurde, unabhängig davon, ob er erfolgreich war oder nicht.

loadstart

Wird ausgelöst, wenn ein Lesevorgang gestartet wurde.

progress

Wird regelmäßig ausgelöst, während Daten gelesen werden.

Dieses Beispiel liest und zeigt die Inhalte einer Textdatei direkt im Browser an.

HTML

<h1>File Reader</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></pre>

JavaScript

const fileInput = document.getElementById("file-input");
const fileContentDisplay = document.getElementById("file-content");
const messageDisplay = document.getElementById("message");

fileInput.addEventListener("change", handleFileSelection);

function handleFileSelection(event) {
  const file = event.target.files[0];
  fileContentDisplay.textContent = ""; // Clear previous file content
  messageDisplay.textContent = ""; // Clear previous messages

  // Validate file existence and type
  if (!file) {
    showMessage("No file selected. Please choose a file.", "error");
    return;
  }

  if (!file.type.startsWith("text")) {
    showMessage("Unsupported file type. Please select a text file.", "error");
    return;
  }

  // Read the file
  const reader = new FileReader();
  reader.onload = () => {
    fileContentDisplay.textContent = reader.result;
  };
  reader.onerror = () => {
    showMessage("Error reading the file. Please try again.", "error");
  };
  reader.readAsText(file);
}

// Displays a message to the user
function showMessage(message, type) {
  messageDisplay.textContent = message;
  messageDisplay.style.color = type === "error" ? "red" : "green";
}

• Verwendung von Dateien aus Webanwendungen
• File
• Blob
• FileReaderSync