FileList - 由 HTML <input> 元素的 files 属性返回的对象

FileList 对象是由 HTML <input> 元素的 files 属性返回的对象；通过它您可以访问使用 <input type="file"> 元素选择的文件列表。它还用于获取使用拖放 API 时放入 Web 内容的文件列表； 有关该用法的详细信息，请参阅 DataTransfer 对象。

注意： 在 Gecko 1.9.2 之前，input 元素仅支持一次选择的一个文件，这意味着 FileList 将只包含一个文件。从 Gecko 1.9.2 开始，如果 input 元素的 multiple 属性为 true，则 FileList 可能包含多个文件。

使用 FileList

所有 <input> 元素节点都有一个 files 数组，允许用来访问文件列表中的项目。例如，如果 HTML 包含以下文件输入：

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

以下代码将获取元素文件列表中的第一个文件，它是一个 File 对象：

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

方法概览

File item(index);

属性

属性 类型 描述
length integer 一个只读值，指示列表中的文件数。

方法

item()

返回表示文件列表中指定索引处的文件的 File 对象。

File item(
 index
);
参数

index

从零开始的，要从列表中检索的文件的索引。

返回值

表示所请求文件的 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 允许选择多个文件d-->

<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) {
        // 在循环中赋值 file 为本地变量
        var file = files[i];
        alert(file.name);
        i++;
    }    
}

// 将 input 元素的 onchange 设置为调用 pullfiles
document.querySelector("#myfiles").onchange=pullfiles;
</script>

</html>

尝试一下 »

规范

规范 状态 备注
File API
FileList 的定义		 工作草案 -
HTML Living Standard
selected files 的定义		 现行的标准 -

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 未知 未知 未知 未知 未知 未知
length 未知 未知 未知 未知 未知 未知
item 未知 未知 未知 未知 未知 未知

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 未知 未知 未知 未知 未知 未知 未知
length 未知 未知 未知 未知 未知 未知 未知
item 未知 未知 未知 未知 未知 未知 未知

相关链接