API файлов позволяет получить доступ к [[software:development:web:docs:web:api:FileList|FileList]] содержащимся [[software:development:web:docs:web:api:File|File]] объектам, представляющим файлы, выбранные пользователем.
Атрибут multipleэлемента inputпозволяет пользователю выбирать несколько файлов.
Доступ к первому выбранному файлу с помощью классического селектора DOM:
const selectedFile = document.getElementById("input").files[0];
==== Доступ к выбранным файлам в случае изменения ====
Также возможно (но не обязательно) получить доступ [[software:development:web:docs:web:api:FileList|FileList]] через change событие. Вам нужно использовать [[software:development:web:docs:web:api:EventTarget:addEventListener|EventTarget.addEventListener()]] для добавления changeпрослушивателя событий, например:
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files; /* now you can work with the file list */
}
===== Получение информации о выбранных файлах =====
Объект [[software:development:web:docs:web:api:FileList|FileList]], предоставленный DOM, перечисляет все файлы, выбранные пользователем, каждый из которых указан как объект [[software:development:web:docs:web:api:File|File]]. Вы можете определить, сколько файлов выбрал пользователь, проверив значение атрибута списка файлов length:
const numFiles = fileList.length;
Отдельные [[software:development:web:docs:web:api:File|File]] объекты можно получить, обратившись к списку как к массиву.
Объект предоставляет три атрибута [[software:development:web:docs:web:api:File|File]], которые содержат полезную информацию о файле.
* [[software:development:web:docs:web:html:attributes:name|name]]
Имя файла в виде строки, доступной только для чтения. Это просто имя файла, не содержащее никакой информации о пути.
* [[software:development:web:docs:web:html:attributes:size|size]]
Размер файла в байтах как 64-битное целое число, доступное только для чтения.
* [[software:development:web:docs:web:html:attributes:type|type]]
MIME-тип файла в виде строки, доступной только для чтения, или ''""'' если тип не может быть определен.
==== Пример: отображение размера файла(ов) ====
В следующем примере показано возможное использование свойства [[software:development:web:docs:web:html:attributes:size|size]]:
File(s) size
===== Использование скрытых элементов ввода файла с помощью метода click() =====
Вы можете скрыть заведомо уродливый файловый [[software:development:web:docs:web:html:element:input|]] элемент и предоставить свой собственный интерфейс для открытия средства выбора файлов и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, задав стиль входному элементу ''display:none'' и вызвав [[software:development:web:docs:web:api:HTMLElement:click|click()]] метод этого [[software:development:web:docs:web:html:element:input|]] элемента.
Код, обрабатывающий ''click'' событие, может выглядеть так:
const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");
fileSelect.addEventListener(
"click",
(e) => {
if (fileElem) {
fileElem.click();
}
},
false,
);
Вы можете стилизовать [[software:development:web:docs:web:html:element:button|