FileList

Интерфейс FileList представляет собой объект этого типа, возвращаемый свойством files элемента HTML <input>; это позволяет получить доступ к списку файлов, выбранных с помощью элемента <input type="file">. Он также используется для списка файлов, перетащенных в веб-контент при использовании API перетаскивания и сброса; см. объект DataTransfer для получения подробностей об этом использовании.

У всех узлов элемента <input> есть атрибут files типа FileList, который позволяет получить доступ к элементам этого списка. Например, если HTML содержит следующий элемент ввода файла:

<input id="fileItem" type="file" />

Следующая строка кода извлекает первый файл в списке файлов узла как объект File:

const file = document.getElementById("fileItem").files[0];

Этот интерфейс был попыткой создать неизменяемый список и продолжает поддерживаться только для того, чтобы не сломать код, который его уже использует. Современные API представляют структуры списков с использованием типов, основанных на JavaScript массивах, тем самым делая доступными многие методы массивов и одновременно накладывая дополнительные семантики на их использование (например, делая их элементы неизменяемыми).

Эти исторические причины не означают, что вы, как разработчик, должны избегать FileList. Вы не создаёте объекты FileList самостоятельно, но получаете их от API, таких как HTMLInputElement.files, и эти API не устарели. Однако будьте осторожны с семантическими различиями от реального массива.

length Только для чтения

Значение только для чтения, указывающее количество файлов в списке.

item()

Возвращает объект File, представляющий файл по указанному индексу в списке файлов.

В этом примере мы выводим имена всех файлов, выбранных пользователем.

HTML

<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>

CSS

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");

fileInput.addEventListener("change", () => {
  for (const file of fileInput.files) {
    output.innerText += `\n${file.name}`;
  }
});

Результат

• Использование файлов из веб-приложений
• File
• FileReader