diff options
Diffstat (limited to 'files/zh-cn/web/api/filelist/index.html')
| -rw-r--r-- | files/zh-cn/web/api/filelist/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/filelist/index.html b/files/zh-cn/web/api/filelist/index.html new file mode 100644 index 0000000000..7912555fcf --- /dev/null +++ b/files/zh-cn/web/api/filelist/index.html @@ -0,0 +1,179 @@ +--- +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> + +<p>一个 FileList 对象通常来自于一个 HTML {{HTMLElement("input")}} 元素的 <code>files</code> 属性，你可以通过这个对象访问到用户所选择的文件。该类型的对象还有可能来自用户的拖放操作，查看 <a href="/zh-CN/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> 对象了解详情。</p> + +<div class="geckoVersionNote"> +<div>{{ gecko_callout_heading("1.9.2") }}</div> + +<p>在 Gecko 1.9.2 之前,通过 <code>input</code> 元素，每次只能选择一个文件，这意味着该 <code>input</code> 元素的 <code>files</code> 属性上的 FileList 对象无论如何都只能包含一个文件。从Gecko 1.9.2 开始，如果一个 <code>input</code> 元素拥有 <code>multiple</code> 属性，则可以用它来选择多个文件。</p> +</div> + +<h2 id="使用_FileList">使用 FileList</h2> + +<p>所有type属性(attribute)为file的 <code><input></code> 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:</p> + +<pre class="eval"><input id="fileItem" type="file"> +</pre> + +<p>下面的一行代码演示如何获取到一个FileList对象中的第一个文件(<a href="/zh-CN/docs/Web/API/File" title="zh-cn/DOM/File"><code>File</code></a> 对象):</p> + +<pre class="brush: js">var file = document.getElementById('fileItem').files[0]; +</pre> + +<h2 id="方法概述">方法概述</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>File <a href="#item ()">item</a>(index);</code></td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</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>一个只读的整数值,用来返回列表中的文件数量。</td> + </tr> + </tbody> +</table> + +<h2 id="方法">方法</h2> + +<h3 id="item()"><code>item()</code></h3> + +<p>根据给定的索引值，返回 FileList 对象中对应的 <code><a href="/zh-CN/docs/Web/API/File" title="zh-cn/DOM/File">File</a></code> 对象。</p> + +<pre class="eval"> File item( + index + ); +</pre> + +<h6 id="参数">参数</h6> + +<dl> + <dt><code>index</code></dt> + <dd>File 对象在 FileList 对象中的索引值，从 0 开始。</dd> +</dl> + +<h6 id="返回值">返回值</h6> + +<p>所请求的<a href="/zh-CN/docs/Web/API/File"><code>File</code></a>对象。</p> + +<h2 id="示例">示例</h2> + +<p>这个例子迭代了用户通过一个 <code>input</code> 元素选择的多个文件：</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(){ + // love the query selector + var fileInput = document.querySelector("#myfiles"); + var files = fileInput.files; + // 获取所选文件数量 + var fl = files.length; + var i = 0; + + while ( i < fl) { + // localize file var in the loop + var file = files[i]; + alert(file.name); + i++; + } +} + +// 设置 change 事件处理函数 +document.querySelector("#myfiles").onchange=pullfiles; + +</script> + +</html></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('File API', '#filelist-section', 'FileList')}}</td> + <td>{{Spec2('File API')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.FileList")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using files from web applications">如何在 Web 应用程序中使用文件</a></li> + <li><code><a href="/zh-CN/docs/DOM/File" title="DOM/File">File</a></code></li> + <li><code><a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a></code></li> +</ul> |