FileList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Объект этого типа возвращается свойством <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()
Возвращает File объект по его индексу в списке.
File item( index );
Параметр
index-
Отсчитываемый от нуля индекс файла для извлечения из списка.
Возвращаемое значение
Тип File, соотвествует запрашиваемому файлу.
Примеры
Этот пример выполняет перебор всех файлов, выбранных пользователем, используя элемент 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)