FileList
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die FileList
Schnittstelle stellt ein Objekt dar, das von der files
-Eigenschaft des HTML-<input>
-Elements zurückgegeben wird. Dies ermöglicht den Zugriff auf die Liste der mit dem <input type="file">
-Element ausgewählten Dateien. Sie wird auch für eine Liste von Dateien verwendet, die in Webinhalte gezogen wurden, wenn die Drag-and-Drop-API verwendet wird; siehe das DataTransfer
-Objekt für Details zu diesem Anwendungsfall.
Alle <input>
-Elementknoten haben ein files
-Attribut vom Typ FileList
, das den Zugriff auf die Elemente in dieser Liste ermöglicht. Wenn das HTML beispielsweise die folgende Datei-Eingabe enthält:
<input id="fileItem" type="file" />
Die folgende Codezeile ruft die erste Datei in der Dateiliste des Knotens als File
-Objekt ab:
const file = document.getElementById("fileItem").files[0];
Diese Schnittstelle war ein Versuch, eine nicht modifizierbare Liste zu erstellen und wird weiterhin unterstützt, um bestehenden Code nicht zu brechen, der sie bereits verwendet. Moderne APIs stellen Listenstrukturen mit Typen dar, die auf JavaScript-Arrays basieren, wodurch viele Array-Methoden verfügbar werden, während gleichzeitig zusätzliche Semantiken für ihre Verwendung auferlegt werden (wie das Festlegen ihrer Elemente auf "read-only").
Diese historischen Gründe bedeuten nicht, dass Sie als Entwickler FileList
vermeiden sollten. Sie erstellen keine FileList
-Objekte selbst, sondern erhalten sie von APIs wie HTMLInputElement.files
, und diese APIs sind nicht veraltet. Seien Sie jedoch vorsichtig mit den semantischen Unterschieden zu einem echten Array.
Instanz-Eigenschaften
length
Nur lesbar-
Ein schreibgeschützter Wert, der die Anzahl der Dateien in der Liste angibt.
Instanz-Methoden
Beispiel
Dateinamen protokollieren
In diesem Beispiel protokollieren wir die Namen aller Dateien, die vom Benutzer ausgewählt wurden.
HTML
<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>
CSS
.output {
overflow: scroll;
margin: 1rem 0;
height: 200px;
}
JavaScript
const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");
fileInput.addEventListener("change", () => {
for (const file of fileInput.files) {
output.innerText += `\n${file.name}`;
}
});
Ergebnis
Spezifikationen
Specification |
---|
File API # filelist-section |
HTML Standard # dom-input-files-dev |
Browser-Kompatibilität
BCD tables only load in the browser