From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/filelist/index.html | 153 +++++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/ru/web/api/filelist/index.html (limited to 'files/ru/web/api/filelist') diff --git a/files/ru/web/api/filelist/index.html b/files/ru/web/api/filelist/index.html new file mode 100644 index 0000000000..350142abee --- /dev/null +++ b/files/ru/web/api/filelist/index.html @@ -0,0 +1,153 @@ +--- +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);
+ +

Свойства

+ + + + + + + + + + + + + + +
АтрибутТипОписание
lengthintegerКоличество файлов в списке, свойство только для чтения (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>
+ +

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

+ + + +

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

+ + -- cgit v1.2.3-54-g00ecf