FileReader: readAsText()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die readAsText()-Methode des FileReader-Interfaces wird verwendet, um den Inhalt des angegebenen Blob oder File zu lesen. Wenn der Lesevorgang abgeschlossen ist, ändert sich die readyState-Eigenschaft auf DONE, das loadend-Ereignis wird ausgelöst, und die result-Eigenschaft enthält den Inhalt der Datei als Textstring.

Hinweis: Die Blob.text()-Methode ist eine neuere, auf Promises basierende API, um eine Datei als Text zu lesen.

Hinweis: Diese Methode lädt den gesamten Inhalt der Datei in den Speicher und ist für große Dateien nicht geeignet. Bevorzugen Sie readAsArrayBuffer() für große Dateien.

Syntax

readAsText(blob)
readAsText(blob, encoding)

Parameter

blob: Der Blob oder File, aus dem gelesen werden soll.
encoding Optional: Ein String, der die zu verwendende Kodierung für die zurückgegebenen Daten angibt. Standardmäßig wird UTF-8 angenommen, wenn dieser Parameter nicht angegeben ist.

<input type="file" /><br />
<p class="content"></p>

JavaScript

const content = document.querySelector(".content");
const fileInput = document.querySelector("input[type=file]");

fileInput.addEventListener("change", previewFile);

function previewFile() {
  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.addEventListener("load", () => {
    // this will then display a text file
    content.innerText = reader.result;
  });

  if (file) {
    reader.readAsText(file);
  }
}