HTMLInputElement: files-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die HTMLInputElement.files-Eigenschaft ermöglicht den Zugriff auf das FileList-Objekt, das mit dem <input type="file">-Element ausgewählt wurde.

Wert

Ein FileList-Objekt, das die ausgewählten 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 Größe und den Typ jeder vom Benutzer ausgewählten Datei protokollieren können.

HTML

html

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

JavaScript

Beachten Sie, dass HTMLInputElement.files immer noch eine Instanz von FileList zurückgibt, selbst wenn keine Dateien ausgewählt sind. Daher ist es sicher, sie mit for...of zu durchlaufen, ohne zu überprüfen, ob Dateien ausgewählt 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
}