FileList

  • 版本网址缩略名: DOM/FileList
  • 版本标题: FileList
  • 版本 id: 37764
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论 218 words added, 52 words removed

修订内容

{{ gecko_minversion_header("1.9") }}

这个对象由HTML input 元素的files属性返回;它允许你访问那些通过<input type="file">元素选择的文件列表。同时,它也被使用在访问那些通过拖放进入到web中的文件列表,这一拖放行为通过相关API来完成, 更多使用方式可以查看 DataTransfer对象。

{{ gecko_minversion_note("1.9.2", "Gecko 1.9.2之前,input file元素一次只能选择一个文件,这意味着FileList对象只保存一个文件的信息(这里的FileList对象是指特定input元素的 input.files,不同input file元素的files属性引用不同的FileList对象实例). 从Gecko 1.9.2开始, 如果该input元素的multiple内部属性为true,那么对应的FileList对象可能保存多个file信息.") }}

使用FileList

所有type属性为file的 <input> 元素节点都有一个文件数组变量files,用来存储用户在各自节点所选的文件. 例如,如下的input标签.

<input id="fileItem" type="file">

下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象)

var file = document.getElementById('fileItem').files[0];

方法概述

File item(index);

属性

属性名 类型 描述
length integer 一个只读的整数值,用来返回列表中文件的数量

方法

item()

根据给定的索引值.返回FileList对象中对应的File对象.

 File item(
   index
 );
参数
index
File对象在FileList对象中的索引值,从0开始.
返回值

所请求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);
}

规范

相关链接

{{ languages( { "en":"en/DOM/FileList" } ) }}

修订版来源

<p>{{ gecko_minversion_header("1.9") }}</p>
<p>这个对象由HTML input 元素的files属性返回;它允许你访问那些通过&lt;input type="file"&gt;元素选择的文件列表。同时,它也被使用在访问那些通过拖放进入到web中的文件列表,这一拖放行为通过相关API来完成, 更多使用方式可以查看 <a href="/zh-cn/DragDrop/DataTransfer" title="zh-cn/DragDrop/DataTransfer"><code>DataTransfer</code></a>对象。</p>
<p>{{ gecko_minversion_note("1.9.2", "Gecko 1.9.2之前,input file元素一次只能选择一个文件,这意味着FileList对象只保存一个文件的信息(这里的FileList对象是指特定input元素的 input.files,不同input file元素的files属性引用不同的FileList对象实例). 从Gecko 1.9.2开始, 如果该input元素的multiple内部属性为true,那么对应的FileList对象可能保存多个file信息.") }}</p>
<h2>使用FileList</h2>
<p>所有type属性为file的 <code>&lt;input&gt;</code> 元素节点都有一个文件数组变量files,用来存储用户在各自节点所选的文件. 例如,如下的input标签.</p>
<pre class="eval">&lt;input id="fileItem" type="file"&gt;
</pre>
<p>下面的一行代码演示如何获取到一个FileList对象中的第一个文件(<a href="/zh-cn/DOM/File" title="zh-cn/DOM/File"><code>File</code></a> 对象)</p>
<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
</pre>
<h2 name="Method_overview"><span class="short_text" id="result_box" lang="zh-CN"><span>方法</span><span>概述</span></span></h2>
<table class="standard-table"> <tbody> <tr> <td><code>File <a href="#item.28.29">item</a>(index);</code></td> </tr> </tbody>
</table>
<h2 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>一个只读的整数值,用来返回列表中文件的数量</td> </tr> </tbody>
</table>
<h2>方法</h2>
<h3 name="item.28.29">item()</h3>
<p>根据给定的索引值.返回FileList对象中对应的<a href="/zh-cn/DOM/File" title="zh-cn/DOM/File"><code>File</code></a>对象.</p>
<pre class="eval"> File item(
   index
 );
</pre>
<h6 name="Parameters">参数</h6>
<dl> <dt><code>index</code></dt> <dd>File对象在FileList对象中的索引值,从0开始.</dd>
</dl>
<h6 name="Return_value">返回值</h6>
<p><span class="short_text" id="result_box" lang="zh-CN"><span>所请求</span><span>的</span></span><a href="/zh-cn/DOM/File" title="zh-cn/DOM/File"><code>File</code></a><span class="short_text" id="result_box" lang="zh-CN"><span>对象</span><span>.</span></span></p>
<h2>例子</h2>
<p>下面的例子对用户在一个<code>input</code>元素里所选的所有文件进行了遍历:</p>
<pre class="eval">// 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>
<h2>规范</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> (HTML 5 working draft)</li>
</ul>
<h2>相关链接</h2>
<ul> <li><a href="/zh-cn/Using_files_from_web_applications" title="zh-cn/Using files from web applications">Using files from web applications</a></li> <li><code><a href="/zh-cn/DOM/File" title="zh-cn/DOM/File">File</a><br> </code></li> <li><code><a href="/zh-cn/DOM/FileReader" title="zh-cn/DOM/FileReader">FileReader</a><br> </code></li>
</ul>
<p>{{ languages( { "en":"en/DOM/FileList" } ) }}</p>
恢复到这个版本