1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: FileList
slug: Web/API/FileList
tags:
- API
- File API
- Files
translation_of: Web/API/FileList
---
<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
<div>Объект этого типа возвращается свойством {{HTMLElement("input")}} элемента, что позволяет получить список выбранных файлов из <code><input type="file"></code>. Также используется для получения списка файлов, брошенных в область веб-контента (<strong>Web content</strong>) по средствам drag and drop API. Смотрите <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer">DataTransfer</a> для детального понимания как это использовать.</div>
<div class="note">
<p><strong>Заметка:</strong> До версии {{Gecko("1.9.2")}}, input элемент поддерживает только один выбранный файл, это значит что FileList содержит только один файл. Начиная с {{Gecko("1.9.2")}}, если input содержит атрибут multiple=true, то FileList может содержать несколько файлов.</p>
</div>
<h2 id="Using_the_file_list" name="Using_the_file_list">Использование FileList</h2>
<p>Все <code><input></code> элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:</p>
<pre><input id="fileItem" type="file">
</pre>
<p><code><font face="Open Sans, Arial, sans-serif">Этот код извлекает первый </font><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code> object из списка:</p>
<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
</pre>
<h2 id="Method_overview" name="Method_overview">Обзор методов</h2>
<table class="standard-table">
<tbody>
<tr>
<td><code>File <a href="#item ()">item</a>(index);</code></td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">Свойства</h2>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Атрибут</td>
<td class="header">Тип</td>
<td class="header">Описание</td>
</tr>
<tr>
<td><code>length</code></td>
<td><code>integer</code></td>
<td>Количество файлов в списке, свойство только для чтения (read-only)</td>
</tr>
</tbody>
</table>
<h2 id="Methods" name="Methods">Методы</h2>
<h3 id="item()" name="item()">item()</h3>
<p>Возвращает <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> объект по его индексу в списке.</p>
<pre> File item(
index
);
</pre>
<h6 id="Parameters" name="Parameters">Параметр</h6>
<dl>
<dt><code>index</code></dt>
<dd>Отсчитываемый от нуля индекс файла для извлечения из списка.</dd>
</dl>
<h6 id="Return_value" name="Return_value">Возвращаемое значение</h6>
<p><code>Тип <a href="/en-US/docs/DOM/File" title="DOM/File">File</a>, соотвествует запрашиваемому файлу.</code></p>
<h2 id="Example" name="Example">Примеры</h2>
<p>Этот пример выполняет перебор всех файлов, выбранных пользователем, используя элемент Input:</p>
<pre class="brush:js">// 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);
}
</pre>
<p>Здесь пример посложнее.</p>
<pre class="brush:html"><!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></pre>
<h2 id="Specification" name="Specification">Спецификация</h2>
<ul>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML5 working draft)</li>
</ul>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
<li><code><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code></li>
<li><code><a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a></code></li>
</ul>
|
