这是我参与8月更文挑战的第13天，活动详情查看： 8月更文挑战

什么是File

文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象(<input type="file"> 元素的files属性),也可以是来自由拖放操作生成的 DataTransfer 对象中的files，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
File.lastModified：返回当前 File 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。只读\
File.lastModifiedDate：返回当前 File 对象所引用文件最后修改时间的 Date 对象。只读\
File.name：返回当前 File 对象所引用文件的名字。只读\
File.size：返回文件的大小。只读\
File.webkitRelativePath：返回 File 相关的 path 或 URL。只读\
File.type：返回文件的多用途互联网邮件扩展类型（MIME Type）。只读\

获取 File 的两种方式

第一种：

构造器创建

new File(fileParts, fileName, [options])

fileParts —— Blob/BufferSource/String 类型值的数组。
fileName —— 文件名字符串。
options —— 可选对象：
lastModified —— 最后一次修改的时间戳（整数日期）。

第二种:

或拖放或其他浏览器接口来获取文件。在这种情况下，file 将从操作系统（OS）获得 this 信息。由于 File 是继承自 Blob 的，所以 File 对象具有相同的属性，附加：

name —— 文件名，
lastModified —— 最后一次修改的时间戳。

实例：

<input type="file" onchange="consoleFile(this)">

<script>
function consoleFile(input) {
  let file = input.files[0];
  alert(`File name: ${file.name}`); // 例如 coolFish.png
  alert(`Last modified: ${file.lastModified}`); // 例如 2020.20.20
}
</script>

TIP:输入（input）可以选择多个文件，因此 input.files 是一个类数组对象。这里我们只有一个文件，所以我们只取 input.files[0]。

什么是FileReader

FileReader 是一个对象，其唯一目的是从 Blob（因此也从 File）对象中读取数据。准确说是一个用来读取Blob对象的一个构造函数，有助于我们操作二进制文件。

let reader = new FileReader(); // 没有参数

主要的使用方法:

readAsArrayBuffer(blob) —— 将数据读取为二进制格式的 ArrayBuffer。
readAsText(blob, [encoding]) —— 将数据读取为给定编码（默认为 utf-8 编码）的文本字符串。
readAsDataURL(blob) —— 读取二进制数据，并将其编码为 base64 的 data url。
abort() —— 取消操作。

这些方法有以下6个声明周期以便操作

loadstart —— 开始加载。
progress —— 在读取过程中出现。
load —— 读取完成，没有 error。
abort —— 调用了 abort()。
error —— 出现 error。
loadend —— 读取完成，无论成功还是失败。

读取完成后，我们可以通过以下两种方法获取读取结果

reader.result 是结果（如果成功）
reader.error 是 error（如果失败）。

实例：

<input type="file" onchange="readFile(this)">

<script>
function readFile(input) {
  let file = input.files[0];

  let reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  };

  reader.onerror = function() {
    console.log(reader.error);
  };

}
</script>

使用FileReader操作Blob

正如我们在 Blob 一章中所提到的，FileReader 不仅可读取文件，还可读取任何 blob。我们可以使用它将 blob 转换为其他格式：

readAsArrayBuffer(blob) —— 转换为 ArrayBuffer，
readAsText(blob, [encoding]) —— 转换为字符串（TextDecoder 的一个替代方案），
readAsDataURL(blob) —— 转换为 base64 的 data url。

如何处理文件？你需要掌握的File 和 FileReader！