Konzepte und Verwendung

Die File API ermöglicht Webanwendungen den Zugriff auf Dateien und deren Inhalte.

Webanwendungen können auf Dateien zugreifen, wenn der Benutzer sie verfügbar macht, entweder mit einemfile<input>-Element odervia Drag & Drop.

Sätze von Dateien, die auf diese Weise zur Verfügung gestellt werden, sind alsFileList-Objekte dargestellt, die es einer Webanwendung ermöglichen, einzelneFile-Objekte abzurufen. Im Gegenzug bietenFile-Objekte Zugriff auf Metadaten wie den Namen der Datei, die Größe, den Typ und das Datum der letzten Änderung.

File-Objekte können anFileReader-Objekte übergeben werden, um auf den Inhalt der Datei zuzugreifen. DasFileReader-Interface ist asynchron, aber eine synchrone Version, die nur inWebworkern verfügbar ist, wird durch dasFileReaderSync-Interface bereitgestellt.

Beziehung zu anderen dateibezogenen APIs

Es gibt zwei weitere wichtige APIs, die ebenfalls mit Dateien arbeiten: dieFile and Directory Entries API und dieFile System API.

Die File API ist die grundlegendste. Sie unterstützt das Lesen und Verarbeiten von Dateidaten, die explizit vom Benutzer in Form eines Formularelement-Eingangs oder einer Drag-and-Drop-Operation bereitgestellt werden. Sie ermöglicht auch die Verarbeitung von Binärdaten über Blobs.

Die File and Directory Entries API, ähnlich der File API, arbeitet auch mit Dateien, die vom Benutzer über Formulareingaben oder Drag-and-Drop-Operationen bereitgestellt werden. Anstatt eines einzelnen Datei kann das Eingabeelement nun die Auswahl eines Verzeichnisses oder mehrerer Dateien ermöglichen. Die API bietet dann eine Möglichkeit, das Verzeichnis oder die Dateien zu verarbeiten. Sie ist hauptsächlich eine eigene Erfindung von Chrome - Sie werden feststellen, dass ihre Erweiterungen anderer Schnittstellen alle mitwebkit präfixiert sind. DieFile and Directory Entries API hat eine ausführlichere Geschichte über ihre Implementierung und Standardisierung. Sie war ursprünglich dafür vorgesehen, ein vollständiges virtuelles Dateisystem zu unterstützen, unterstützt aber jetzt nur noch Leseoperationen auf vom Benutzer bereitgestellten Daten.

Die File System API bietet ein virtuelles Dateisystem für Webanwendungen, damit diese Daten in einem virtuellen System speichern können, das privat für den Ursprung des Dokuments ist (bekannt alsOrigin private file system (OPFS)). Die File System Access API erweitert die File System API weiter, um es Websites zu ermöglichen, Benutzerdateien zu lesen und zu schreiben, vorbehaltlich der Zustimmung des Benutzers. Im Gegensatz zur File API und der File and Directory Entries API ist die File System API rein JavaScript-basiert und arbeitet nicht mit Formulareingaben.

Schnittstellen

Blob

Steht für ein "Binary Large Object", also ein dateiähnliches Objekt aus unveränderlichem, rohem Datenmaterial; einBlob kann als Text oder Binärdaten gelesen oder in einenReadableStream umgewandelt werden, sodass seine Methoden zur Verarbeitung der Daten genutzt werden können.

File

Bietet Informationen über eine Datei und ermöglicht JavaScript in einer Webseite den Zugriff auf deren Inhalt.

FileList

Wird durch diefiles-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. Es wird auch für eine Liste von Dateien verwendet, die mittels der Drag-and-Drop-API in den Webinhalt fallen gelassen werden; siehe dasDataTransfer-Objekt für Details zu dieser Verwendung.

FileReader

Ermöglicht Webanwendungen das asynchrone Lesen der Inhalte von Dateien (oder rohen Datenpuffern), die auf dem Computer des Benutzers gespeichert sind, unter Verwendung vonFile- oderBlob-Objekten, um die Datei oder Daten anzugeben, die gelesen werden sollen.

FileReaderSync

Ermöglicht Webanwendungen das synchrone Lesen der Inhalte von Dateien (oder rohen Datenpuffern), die auf dem Computer des Benutzers gespeichert sind, unter Verwendung vonFile- oderBlob-Objekten zur Angabe der zu lesenden Datei oder Daten.

Erweiterungen zu anderen Schnittstellen

URL.createObjectURL()

Erstellt eine URL, die verwendet werden kann, um auf einFile- oderBlob-Objekt zuzugreifen.

URL.revokeObjectURL()

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

Beispiele

Eine Datei lesen

In diesem Beispiel stellen wir einfile<input>-Element bereit, 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></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();  }});

Ergebnis

Spezifikationen

Siehe auch

• <input type="file">: das Datei-Eingabeelement
• Blob.text()
• DieDataTransfer-Schnittstelle