diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/filelist | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-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.html | 153 |
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><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> |