--- title: FileList slug: Web/API/FileList tags: - API - File API - Files translation_of: Web/API/FileList ---
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
Объект этого типа возвращается свойством {{HTMLElement("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>

Спецификация

Смотрите также