这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战
File API
File 接口提供了文件的信息，以及文件内容的存取方法。 Web应用程序的一个主要的难点是无法操作用户计算机上的文件。之前处理文件的唯一方式就是把 < input type="file" >放到一个表单里。File API与Blob API是为了让Web开发者能以安全的方式访问客户端机器上的文件，从而更好地与这些文件交互而设计的。
通过File API,我们可以在用户选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。每个File对象都有一些只读属性。
- name：本地系统中的文件名。
- size：以字节计的文件大小。
- type：包含文件MIME类型的字符串。
- lastModifiedDate：表示文件最后修改时间的字符串。这个属性只 有Chome实现了。
所有type属性(attribute)为file的< input >元素都有一个files属性，用来存储用户所选择的文件。files有一个length属性和item方法，我们可以通过files[index]或者files.item(index)获取我们选择的file对象。可以通过change事件监听input file输入完成事件：
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener('change', function(event) {
var file = fileInput.files[0];
// 或file = fileInput.files.item(0);
console.log(file);
}, false);
FileReader类型
File API还提供了 FileReader类型，让我们可以实际从文件中读取数据。
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个< input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果。
- readAsText(file, encoding)：从文件中读取纯文本内容并保存 在result属性中。第二个参数表示编码，是可选的。
- readAsDataURL(file)：读取文件并将内容的数据URI保存在result 属性中。
- readAsBinaryString(file)：读取文件并将每个字符的二进制数据 保存在result属性中。
- readAsArrayBuffer(file)：读取文件并将文件内容以ArrayBuffer 形式保存在result属性。
DataURI对象
我们大多数都使用了"data:image/png;base64,xxxxxxxxxxxxx"过这种形式来显示图片，这种字符串叫做DataURI对象，允许将一个小文件进行编码后嵌入到另外一个文档里，格式为：
data:[<MIME type>][;charset=<charset>][;base64],<encoded data>
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsDataURL(file);
URL是uniform resource locator的缩写，在web中的每一个可访问资源都有一个URL地址，我们可以通过这个地址去download这个资源。 其实URL是URI的子集，URI是uniform resource identifier的缩写。URI是用于获取资源，包括其附加的信息的一种协议。附加信息可能是地址，也可能不是地址，如果是地址，那么这时URI就变成URL了。注意的是data URI不是URL，因为它并不包含资源的公共地址。 我们可以通过FileReader 的readAsDataURL方法获得：
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsDataURL(file);
