html5写入文件,HTML5中的文件读取---File API

1.简介

在Html5中提供了一种通过File API规范与本地文件进行交互的标准方法。在使用 File API 在向服务器发送图片的过程中可以创建图片的缩略图预览，也可以允许应用程序在用户离线时保存文件引用。另外，您可以使用客户端逻辑来验证上传内容的 type 与其文件扩展名是否匹配，或者限制上传内容的大小。

该规范通过“本地”文件系统提供了多种文件访问接口：

1.1 FileList 对象

filelist对象是针对表单的file控件，当用户利用file控件选取文件以后，这个控件的files属性就是filelist对象。

//使用多选控件

document.getElementById('file-test').onchange = function() {

console.log(this.files);

};

image.png

注：除了file控件以外，采用拖放的方式，也可以得到filelist对象。一般情况下，filelist对象只能被动的读取，不可以手动构造，只有在user主动触发(选取或拖拽)了文件读取的行为，javascript才会访问到filelist。

1.2 File对象

在filelist对象中就包括了file对象，file对象含有以下的属性：

name: 文件名，只读属性；

size: 文件大小，单位为字节，只读属性；

type: 文件的MIME类型，若是分辨不出类型，则为空字符串，只读属性；

lastModified：文件的上次修改时间，格式为时间戳；

lastModifiedDate：文件上次修改时间，格式为Date对象实例。

如下图所示：

image.png

1.3 Blob对象

Blob(Binary Large Object)对象代表了一段二进制数据，提供了一系列操作接口，其他二进制数据的API(比如File对象)，都是建立在Blob对象基础上的，继承了它的属性和方法。

生成Blob对象有两种方法：一种是使用Blob构造函数，另一中是对现有的Blob对象使用slice方法切出一部分。

1.4 FileReader

FileReader对象用于读取文件，他的参数是file对象或blob对象。对于不同类型的文件，FileReader提供了不同的读取方法：

readerAsText(blob|File,opt_encoding) ：

返回文本字符串，默认情况下，文本编码格式是UTF-8，可以通过可选参数指定其他编码格式的文本。

readerAsDataURL(Blob|File) :

返回一个基于Base64编码的data-uri对象(可用于标