【JavaScript 教程】浏览器—File 对象，FileList 对象，FileReader 对象
1、File 对象
// HTML 代码如下
//
var file = document.getElementById('fileItem').files[0];
file instanceof File // truefile是用户选中的第一个文件，它是 File 的实例。1.1、构造函数
File()构造函数，用来生成 File 实例对象。new File(array, name [, options])File()构造函数接受三个参数。array：一个数组，成员可以是二进制对象或字符串，表示文件的内容。
name：字符串，表示文件名或文件路径。
options：配置对象，设置实例的属性。该参数可选。
type：字符串，表示实例对象的 MIME 类型，默认值为空字符串。
lastModified：时间戳，表示上次修改的时间，默认为Date.now()。
var file = new File(
['foo'],
'foo.txt',
{
type: 'text/plain',
}
);1.2、实例属性和实例方法
File.lastModified：最后修改时间
File.name：文件名或文件路径
File.size：文件大小（单位字节）
File.type：文件的 MIME 类型
var myFile = new File([], 'file.bin', {
lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""myFile的内容为空，也没有设置 MIME 类型，所以size属性等于0，type属性等于空字符串。slice()。2、FileList 对象
FileList对象是一个类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。它主要出现在两个场合。文件控件节点（）的files属性，返回一个 FileList 实例。
拖拉一组文件时，目标区的DataTransfer.files属性，返回一个 FileList 实例。
// HTML 代码如下
//
var files = document.getElementById('fileItem').files;
files instanceof FileList // truefiles属性是一个 FileList 实例。length，表示包含多少个文件。item()，用来返回指定位置的实例。它接受一个整数作为参数，表示位置的序号（从零开始）。但是，由于 FileList 的实例是一个类似数组的对象，可以直接用方括号运算符，即myFileList[0]等同于myFileList.item(0)，所以一般用不到item()方法。3、FileReader 对象
FileReader构造函数，用来生成 FileReader 实例。var reader = new FileReader();FileReader.error：读取文件时产生的错误对象 FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。 FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。 FileReader.onabort：abort事件（用户终止读取操作）的监听函数。 FileReader.onerror：error事件（读取错误）的监听函数。 FileReader.onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。 FileReader.onloadstart：loadstart事件（读取操作开始）的监听函数。 FileReader.onloadend：loadend事件（读取操作结束）的监听函数。 FileReader.onprogress：progress事件（读取操作进行中）的监听函数。
load事件的一个例子。// HTML 代码如下
//
function onChange(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.target.result)
};
reader.readAsText(file);
}load事件发生），就打印出文件内容。FileReader.abort()：终止读取操作，readyState属性将变成2。 FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。 FileReader.readAsBinaryString()：读取完成后，result属性将返回原始的二进制字符串。 FileReader.readAsDataURL()：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于
*/
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener('load', function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}上面代码中，用户选中图片文件以后，脚本会自动读取文件内容，然后作为一个 Data URL 赋值给 元素的src属性，从而把图片展示出来。推荐阅读 【JavaScript 教程】浏览器模型—Cookie Navigator 对象，Screen 对象。 【JavaScript 教程】浏览器—window 对象 【JavaScript 教程】浏览器—浏览器环境概述 XMLHttpRequest 对象 【JavaScript 教程】浏览器—同源限制 【JavaScript 教程】浏览器—CORS 通信 【JavaScript 教程】浏览器—Storage 接口 【JavaScript 教程】浏览器—History 对象 Location对象，URL对象，URLSearchParams;对象 【JavaScript 教程】浏览器—ArrayBuffer对象，Blob对象 
评论