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 Werte:

Name	Wert	Beschreibung
EMPTY	0	Es wurden noch keine Daten geladen.
LOADING	1	Daten werden gerade geladen.
DONE	2	Der gesamte Lesevorgang wurde abgeschlossen.

FileReader.result Schreibgeschützt

Der Inhalt der Datei. Diese Eigenschaft ist nur gültig, nachdem der Lesevorgang abgeschlossen ist, und das Format der Daten hängt davon ab, welche der Methoden verwendet wurde, um den Lesevorgang zu starten.

FileReader.abort()

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

FileReader.readAsArrayBuffer()

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

FileReader.readAsBinaryString() Veraltet

Beginnt mit dem Lesen des Inhalts des angegebenen Blob. Nach Abschluss enthält das result-Attribut die rohen 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 repräsentiert.

FileReader.readAsText()

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

Hören Sie auf diese Ereignisse mit addEventListener() oder durch Zuweisung eines Ereignis-Listeners zur oneventname-Eigenschaft dieses Interfaces. 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, zum Beispiel weil das Programm FileReader.abort() aufgerufen hat.

error

Wird ausgelöst, wenn der Lesevorgang 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 erfolgreich oder nicht.

loadstart

Wird ausgelöst, wenn ein Lesevorgang gestartet wurde.

progress

Wird periodisch ausgelöst, während Daten gelesen werden.

Dieses Beispiel liest und zeigt den Inhalt 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