HTMLInputElement: files-Eigenschaft

Ein FileList-Objekt, das die ausgewählten Dateien auflistet, falls vorhanden, oder null, wenn das HTMLInputElement nicht vom Typ type="file" ist.

Das folgende Beispiel zeigt, wie Sie auf die HTMLInputElement.files-Eigenschaft zugreifen und den Namen, das Änderungsdatum, die Größe und den Typ jeder vom Benutzer ausgewählten Datei protokollieren können.

Beachten Sie, dass HTMLInputElement.files auch dann eine Instanz von FileList zurückgibt, wenn keine Dateien ausgewählt sind. Daher ist es sicher, mit for...of darauf zu iterieren, ohne zu prü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
}

• DataTransfer.files