FileList
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ru/web/api/file_api/index.md)
Объект этого типа возвращается свойством <input>
элемента, что позволяет получить список выбранных файлов из <input type="file">
. Также используется для получения списка файлов, брошенных в область веб-контента (Web content) по средствам drag and drop API. Смотрите DataTransfer для детального понимания как это использовать.
Примечание: До версии Gecko 1.9.2, input элемент поддерживает только один выбранный файл, это значит что FileList содержит только один файл. Начиная с Gecko 1.9.2, если input содержит атрибут multiple=true, то FileList может содержать несколько файлов.
Использование FileList
Все <input>
элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:
<input id="fileItem" type="file">
Этот код извлекает первый File
object из списка:
var file = document.getElementById("fileItem").files[0];
Обзор методов
File item(index); |
---|
Свойства
Атрибут | Тип | Описание |
---|---|---|
length |
integer |
Количество файлов в списке, свойство только для чтения (read-only) |
Методы
item()
Примеры
Этот пример выполняет перебор всех файлов, выбранных пользователем, используя элемент Input:
// fileInput это HTML input элемент: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");
// files это FileList объект (похож на NodeList)
var files = fileInput.files;
var file;
// обходит файлы используя цикл
for (var i = 0; i < files.length; i++) {
// получаем сам файл
file = files.item(i);
// или можно так
file = files[i];
alert(file.name);
}
Здесь пример посложнее.
<!doctype html>
<html>
<head> </head>
<body>
<!--атрибут multiple позволяет выбрать сразу несколько файлов-->
<input id="myfiles" multiple type="file" />
</body>
<script>
var pullfiles = function () {
// выбираем файловые инпуты на странице
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
// кешируем files.length
var fl = files.length;
var i = 0;
while (i < fl) {
// локализуем файловую переменную в цикле
var file = files[i];
alert(file.name);
i++;
}
};
// привязываем событие изменения input
document.querySelector("#myfiles").onchange = pullfiles;
//a.t
</script>
</html>
Спецификации
- File upload state (HTML5 working draft)