FileList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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 Schreibgeschützt

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
# dom-input-files-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
FileList
item
length

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch