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()方法,结果与通过表单上传一模一样。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180601G0JUD800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券