aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/filelist
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/filelist
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/ru/web/api/filelist')
-rw-r--r--files/ru/web/api/filelist/index.html153
1 files changed, 153 insertions, 0 deletions
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
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<div>Объект этого типа возвращается свойством {{HTMLElement("input")}} элемента, что позволяет получить список выбранных файлов из <code>&lt;input type="file"&gt;</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>&lt;input&gt;</code> элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</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 элемент: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files это FileList объект (похож на NodeList)
+var files = fileInput.files;
+var file;
+
+// обходит файлы используя цикл
+for (var i = 0; i &lt; files.length; i++) {
+
+ // получаем сам файл
+ file = files.item(i);
+ // или можно так
+ file = files[i];
+
+ alert(file.name);
+}
+</pre>
+
+<p>Здесь пример посложнее.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;!--атрибут multiple позволяет выбрать сразу несколько файлов--&gt;
+
+&lt;input id="myfiles" multiple type="file"&gt;
+
+&lt;/body&gt;
+
+&lt;script&gt;
+
+var pullfiles=function(){
+ // выбираем файловые инпуты на странице
+ var fileInput = document.querySelector("#myfiles");
+ var files = fileInput.files;
+ // кешируем files.length
+ var fl=files.length;
+ var i=0;
+
+ while ( i &lt; fl) {
+ // локализуем файловую переменную в цикле
+ var file = files[i];
+ alert(file.name);
+ i++;
+ }
+}
+
+// привязываем событие изменения input
+document.querySelector("#myfiles").onchange=pullfiles;
+
+//a.t
+&lt;/script&gt;
+
+&lt;/html&gt;</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>