file API-访问计算机文件

我们把自己搞的很狼狈，却在抱怨这个世界太残酷。我们总是很有道理。

前言

在js中我们处理文件唯一的方式就是在表单中加入 ,我们通过侦听 change 事件并读取 files 集合就可以知道选择的每个文件的信息。但是你对File API了解有多少？

File对象

File对象有四个常用的只读属性，

1、name：本地文件的文件名；

2、size：文件的字节大小；

3、type：字符串，文件的MIME类型；

4、lastModifiedDate：字符串，文件上一次被修改的时间（只有 Chrome 实现了这个属性）。举个例子，通过侦听 change 事件并读取 files 集合就可以知道选择的每个文件的信息。

当然你可以判断type的类型进行操作，常见的type类型有video、audio、text、image。

FileReader读取器

我们从计算机中获取文件之后，怎么回显呢？我们需要创建一个文件读取器，FileReader就是帮我们实现的，常用的api有readAsText和readAsDataURL。

FileReader是一种异步文件读取机制，类似XMLHttpRequest，区别就是它读取的是文件系统，而不是远程服务器。

FileReader提供了四种方法，帮助我们读取文件，

1、readAsText(file,encoding)：以纯文本形式读取文件，将读取到的文本保存在 result 属性中。第二个参数用于指定编码类型，是可选的。

2、readAsDataURL(file)：读取文件并将文件以数据 URI 的形式保存在 result 属性中。

3、readAsBinaryString(file)：读取文件并将一个字符串保存在 result 属性中，字符串中的每个字符表示一字节。

4、readAsArrayBuffer(file)：读取文件并将一个包含文件内容的 ArrayBuffer 保存在result 属性中。

由于读取过程是异步的，FileReader提供了三个最常用的事件，progress、error 和 load，分别表示是否又读取了新数据、是否发生了错误以及是否已经读完了整个文件。

我们要想获取异步获取到的文件，必须在这些事件中，比如我们把获取到的图片，显示到页面中，我们就必须要在load中操作，文件加载成功后会把结果放在result中。

每过 50ms 左右，就会触发一次 progress 事件，通过事件对象可以获得与 XHR 的progress 事件相同的信息（属性）：lengthComputable、loaded 和 total。另外，尽管可能没有包含全部数据，但每次 progress 事件中都可以通过FileReader 的 result 属性读取到文件内容。如果加载速度很快的话，一般情况下不会看到loaded 的变化，如果文件很大的话，就会看到。

由于种种原因无法读取文件，就会触发 error 事件。触发 error 事件时，相关的信息将保存到FileReader 的 error 属性中。这个属性中将保存一个对象，该对象只有一个属性 code，即错误码。这个错误码是 1 表示未找到文件，是 2 表示安全性错误，是 3 表示读取中断，是 4 表示文件不可读，是5 表示编码错误。

文件可以获取到，但是如果我们读取的是本地的视频或者音频，又该怎么显示？

URL对象

URL可以帮我们创建一个url，我们可以通过window.URL或者直接URL去使用它，常用的有两个方法：

1、createObjectURL，根据传入的参数创建一个指向该参数对象的URL；它是一个二级制数据。

2、revokeObjectURL，释放对象。页面卸载时会自动释放对象 URL 占用的内存。不过，为了确保尽可能少地占用内存，最好在不需要某个对象 URL 时，就马上手工释放其占用的内存。

我们可以用URL来回显媒体元素，比如image、video、audio等等；

我们把标签src指定为blob对象时，就可以回显我们读取的媒体元素。

读取部分内容

File 对象还支持一个 slice()方法，slice()方法接收两个参数：起始字节及要读取的字节数。这个方法返回一个 Blob 的实例，Blob 是 File 类型的父类型。当然也有兼容性。

如果我们现在有一个变态的需求，需要读取一个html文件中的一部分内容。我们现在有一个test.html文件，我们要读取body中的内容回显到当前页面。

读取拖放的文件

在页面上创建了自定义的放置目标之后，你可以从桌面上把文件拖放到该目标。与拖放一张图片或者一个链接类似，从桌面上把文件拖放到浏览器中也会触发 drop 事件。而且可以在 files中读取到被放置的文件，当然此时它是一个 File 对象，与通过文件输入字段取得的 File 对象一样。谷歌浏览器现在不支持拖放，需要下载插件。我用的是搜狗浏览器。

XHR 上传文件

上传文件我们一般用表单，通过表单的提交的方式上传。首先，要创建一个 FormData对象，通过它调用 append()方法并传入相应的 File 对象作为参数。然后，再把 FormData 对象传递给 XHR 的 send()方法，结果与通过表单上传一模一样。