HTMLInputElement: files-Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die HTMLInputElement.files-Eigenschaft ermglicht den Zugriff auf das FileList-Objekt, das mit dem <input type="file">-Element ausgewhlt wurde.

Wert

Ein FileList-Objekt, das die ausgewhlten Dateien auflistet, falls vorhanden, oder null, wenn der HTMLInputElement nicht vom type="file" ist.

Das folgende Beispiel zeigt, wie Sie auf die HTMLInputElement.files-Eigenschaft zugreifen und den Namen, das Datum der letzten nderung, die Gre und den Typ jeder vom Benutzer ausgewhlten Datei protokollieren knnen.

HTML

html

<input id="files" type="file" multiple />

JavaScript

Beachten Sie, dass HTMLInputElement.files immer noch eine Instanz von FileList zurckgibt, selbst wenn keine Dateien ausgewhlt sind. Daher ist es sicher, sie mit for...of zu durchlaufen, ohne zu berprfen, ob Dateien ausgewhlt sind.

const fileInput = document.getElementById("files");

console.log(fileInput.files instanceof FileList); // true even if empty

for (const file of fileInput.files) {
  console.log(file.name); // prints file name
  let fileDate = new Date(file.lastModified);
  console.log(fileDate.toLocaleDateString()); // prints legible date
  console.log(
    file.size < 1000 ? file.size : `${Math.round(file.size / 1000)}KB`,
  );
  console.log(file.type); // prints MIME type
}