HTMLInputElement: свойство files

Свойство HTMLInputElement.files позволяет получить доступ к FileList, выбранным с помощью элемента <input type="file">.

Объект FileList, содержащий список выбранных файлов, или null, если элемент HTMLInputElement не соответствует типу type="file".

В примере ниже показано, как получить доступ к свойству HTMLInputElement.files и вывести имя, дату изменения, размер и тип каждого выбранного пользователем файла.

Обратите внимание, что HTMLInputElement.files по-прежнему возвращает экземпляр FileList, даже если файлы не выбраны. Поэтому можно безопасно перебирать его с помощью for...of без проверки наличия выбранных файлов.

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