blob: 7912555fcf58b9e219e93b2610731bf4fe51fcf5 (
plain)
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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>
|
