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:

html
<input id="fileItem" type="file" />

Die folgende Codezeile ruft die erste Datei in der Dateiliste des Knotens als File-Objekt ab:

js
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

item()

Gibt ein File-Objekt zurück, das die Datei am angegebenen Index in der Dateiliste darstellt.

Beispiel

Dateinamen protokollieren

In diesem Beispiel protokollieren wir die Namen aller Dateien, die vom Benutzer ausgewählt wurden.

HTML

html
<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>

CSS

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

JavaScript

js
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

Siehe auch