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 angibt. Dies ist einer der folgenden:

Name	Wert	Beschreibung
EMPTY	0	Es wurden noch keine Daten geladen.
LOADING	1	Daten werden derzeit 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 von der Methode ab, die 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. Sobald der Vorgang abgeschlossen ist, enthält das result-Attribut einen ArrayBuffer, das die Daten der Datei darstellt.

FileReader.readAsBinaryString() Veraltet

Beginnt mit dem Lesen des Inhalts des angegebenen Blob. Sobald der Vorgang abgeschlossen ist, enthält das result-Attribut die rohen binären Daten der Datei als String.

FileReader.readAsDataURL()

Beginnt mit dem Lesen des Inhalts des angegebenen Blob. Sobald der Vorgang abgeschlossen ist, 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. Sobald der Vorgang abgeschlossen ist, 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 indem Sie einen Ereignis-Listener auf die oneventname-Eigenschaft dieses Interfaces setzen. 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, weil beispielsweise 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 ist, unabhängig davon, ob er erfolgreich war 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