html5文件api

FileList对象

html4 file控件只允许放置一个文件,html5支持一次放置多个文件,通过添加multiple属性,每个文件是一个file对象，FileList是file对象的集合..

file对象有俩个属性name和lastModifiedDate（表示文件的最后修改时间）

Blob对象

Blob表示二进制原始数据，它提供了一个slice方法，可以通过该方法访问到字节内部的原始数据，事实上上面提到的file对象也继承了这个Blob对象..

Blob对象有俩个属性，size表示一个Blob对象的字节长度，type表示Blob的MIME类型，如果是未知类型，则返回一个空字符串...

 

通过document.getElementById('file').files获取FileList对象...

遍历获取每个file对象，可以看它的file.name、file.type、file.size等...

还可以给file控件添加accept属性

如<input type=“file” accept="image/*" />

企图让flie控件只能接受某种类型文件，但主流浏览器对其的支持都只限于在打开文件选择窗口时，默认选择图像文件而已，如果选择其他类型文件file控件也正常接受...

 

FileReader接口

FileReader接口主要用来把文件读入内存，并且读取文件中的数据.它提供了一个异步api，使用该api可以在浏览器主线程中异步访问文件系统,读取文件中的数据..

无论读取成功或失败，方法不会返回读取结果，这一结果保存在result属性中...

typeof FileReader检查是否支持

正常使用

var reader = new FileReader();

方法名                                        参数                 描述

readAsBinaryString                     file                   将文件读取为二进制码

readAsText                                file, [encoding]  将文件读取为文本

readAsDataURL                          file                   将文件读取为DataURL

abort                                        (none)             中断读取操作

 

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：这个方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：该方法将文件读取为一串Data URL字符串，该方法事实上将小文件以一种特殊格式的URL地址形式直接读入页面。这里的小文件通常是指图像与html等格式的文件。

FileReader接口的事件

事件                  描述

onabort

数据读取中断时触发

onerror

数据读取出错时触发

onload

数据读取成功完成时触发

onloadend

数据读取完成时触发，无论成功或失败

onprogress  (可以用新增的元素progress来显示大文件读取完成百分比)

数据读取中

onloadstart

文件读取开始时触发