一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件.该类型的对象还有可能来自用户的拖放操作,查看DataTransfer对象了解详情.
Gecko 1.9.2 note
(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)
在Gecko 1.9.2之前,通过input元素,每次只能选择一个文件,这意味着该input元素的files属性上的FileList对象只能包含一个文件.从Gecko 1.9.2开始,如果一个input元素拥有multiple属性,则可以用它来选择多个文件.
使用FileList
所有type属性(attribute)为file的 <input> 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:
<input id="fileItem" type="file">
下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):
varfile = document.getElementById('fileItem').files[0];
方法概述
File item(index); |
属性
| 属性名 | 类型 | 描述 |
length |
integer |
一个只读的整数值,用来返回该FileList对象中的文件数量 |
方法
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);
}
下面是一个更完整的例子.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
// multiple属性可以让用户能选择多个文件
<input id="myfiles" multiple type="file">
</body>
<script>
var pullfiles=function(){
// 获取到input元素
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
// 获取到所选文件数量
var fl=files.length;
var i=0;
while ( i < fl) {
var file = files[i];
alert(file.name);
i++;
}
}
// 设置change事件处理函数
document.querySelector("#myfiles").onchange=pullfiles;
</script>
</html>
规范
- File upload state (HTML5工作草案)