JavaScript File API和Blob API

1、File类型

每个file对象都有一些只读属性。

• name: 本地系统中的文件名。
• size：以字节计的文件大小。
• type：包含文件 MIME 类型的字符串。
• lastModifiedDate：表示文件最后修改时间的字符串。这个属性只有 Chome 实现了。

例如，通过监听 change 事件然后遍历 files 集合可以取得每个选中文件的信息：

let filesList = document.getElementById("files-list"); 
filesList.addEventListener("change", (event) => { 
 let files = event.target.files, 
 i = 0, 
 len = files.length; 
 while (i < len) { 
 const f = files[i]; 
 console.log(`${f.name} (${f.type}, ${f.size} bytes)`); 
 i++; 
 } 
}); 

File API 还提供了 FileReader 类型，让我们可以实际从文件中读取数据。

2、FileReader 类型

FileReader类型表示一种异步文件读取机制。可以把FileReader 想象成类似于XMLHttpRequest，
只不过是用于从文件系统读取文件，而不是从服务器读取数据。FileReader 类型提供了几个读取文件
数据的方法。

• readAsText(file, encoding)：从文件中读取纯文本内容并保存在 result 属性中。第二个
  参数表示编码，是可选的。
• readAsDataURL(file)：读取文件并将内容的数据 URI 保存在 result 属性中。
• readAsBinaryString(file)：读取文件并将每个字符的二进制数据保存在 result 属性中。
• readAsArrayBuffer(file)：读取文件并将文件内容以 ArrayBuffer 形式保存在 result 属性。

这些读取数据的方法为处理文件数据提供了极大的灵活性。例如，为了向用户显示图片，可以将图
片读取为数据 URI，而为了解析文件内容，可以将文件读取为文本。