File API

Die File API ermöglicht es Webanwendungen, auf Dateien und deren Inhalte zuzugreifen.

Webanwendungen können auf Dateien zugreifen, wenn der Benutzer sie verfügbar macht, entweder durch ein Datei-<input>-Element oder durch Drag-and-Drop.

Dateien, die auf diese Weise verfügbar gemacht werden, werden als FileList-Objekte dargestellt, die es einer Webanwendung ermöglichen, einzelne File-Objekte abzurufen. File-Objekte bieten wiederum Zugriff auf Metadaten wie den Dateinamen, die Größe, den Typ und das Datum der letzten Änderung.

File-Objekte können an FileReader-Objekte übergeben werden, um auf die Inhalte der Datei zuzugreifen. Die FileReader-Schnittstelle arbeitet asynchron, aber eine synchrone Version, die nur in Web-Arbeitern verfügbar ist, wird durch die FileReaderSync-Schnittstelle bereitgestellt.

Blob

Repräsentiert ein "Binary Large Object", also ein dateiähnliches Objekt mit unveränderlichen, rohen Daten; ein Blob kann als Text oder Binärdaten gelesen oder in einen ReadableStream konvertiert werden, so dass seine Methoden zur Verarbeitung der Daten verwendet werden können.

File

Bietet Informationen über eine Datei und erlaubt JavaScript auf einer Webseite, auf deren Inhalt zuzugreifen.

FileList

Wird von der files-Eigenschaft des HTML-<input>-Elements zurückgegeben; damit können Sie auf die Liste der mit dem <input type="file">-Element ausgewählten Dateien zugreifen. Sie wird auch für eine Liste von Dateien verwendet, die durch die Nutzung der Drag-and-Drop-API in Webinhalte gezogen wurden; siehe das DataTransfer-Objekt für Details zur Nutzung.

FileReader

Ermöglicht es Webanwendungen, den Inhalt von Dateien (oder rohen Datenpuffern), die auf dem Computer des Nutzers gespeichert sind, asynchron zu lesen, indem File- oder Blob-Objekte verwendet werden, um die zu lesende Datei oder Daten anzugeben.

FileReaderSync

Ermöglicht es Webanwendungen, den Inhalt von Dateien (oder rohen Datenpuffern), die auf dem Computer des Nutzers gespeichert sind, synchron zu lesen, indem File- oder Blob-Objekte verwendet werden, um die zu lesende Datei oder Daten anzugeben.

URL.createObjectURL()

Erstellt eine URL, die verwendet werden kann, um ein File- oder Blob-Objekt abzurufen.

URL.revokeObjectURL()

Hebt eine bestehende Objekt-URL auf, die zuvor durch Aufruf von URL.createObjectURL() erstellt wurde.

In diesem Beispiel bieten wir ein Datei-<input>-Element an, und wenn der Benutzer eine Datei auswählt, lesen wir den Inhalt der ersten ausgewählten Datei als Text und zeigen das Ergebnis in einem <div> an.

HTML

<input type="file" />
<div class="output"></div>

CSS

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

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

fileInput.addEventListener("change", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});

• <input type="file">: das Dateieingabeelement
• Blob.text()
• Die DataTransfer-Schnittstelle