HTML5中怎么利用FileAPI对文件进行处理

这期内容当中小编将会给大家带来有关HTML 5中怎么利用FileAPI对文件进行处理，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

成都创新互联专注于企业营销型网站建设、网站重做改版、爱辉网站定制设计、自适应品牌网站建设、H5建站、商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为爱辉等各大城市提供网站开发制作服务。

总览

FileAPI是一些列文件处理规范的基础，包含最基础的文件操作的JavaScript接口设计。其中最主要的接口定义一共有4个：

◆ FileList接口: 可以用来代表一组文件的JS对象，比如用户通过input[type="file"]元素选中的本地文件列表

◆ Blob接口: 用来代表一段二进制数据，并且允许我们通过JS对其数据以字节为单位进行“切割”

◆ File接口: 用来代步一个文件，是从Blob接口继承而来的，并在此基础上增加了诸如文件名、MIME类型之类的特性

◆ FileReader接口: 提供读取文件的方法和事件

这里有两点细节需要注意：

1. 我们平时使用input[type="file"]元素都是选中单个文件，其本身是允许同时选中多个文件的，所以会用到FileList

2. Blob接口和File接口可以返回数据的字节数等信息，也可以“切割”，但无法获取真正的内容，这也正是FileReader存在的意义，而文件大小不一时，读取文件可能存在明显的时间花费，所以我们用异步的方式，通过触发另外的事件来返回读取到的文件内容

接口描述

这4个接口其实并不复杂，也很好理解(接口中的“#Foo”表示任意Foo类型的对象)：

FileList接口

#FileList[index] // 得到第index个文件

Blob接口

#Blob.size // 只读特性，数据的字节数  #Blob.slice(start, length) // 将当前文件切割并将结果返回

File接口

#File.size // 继承自Blob，意义同上  #File.slice(start, length) // 继承自Blob，意义同上  #File.name // 只读属性，文件名  #File.type // 只读属性，文件的MIME类型  #File.urn // 只读属性，代表该文件的URN，几乎用不到，暂且无视

FileReader方法

#FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容  #FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容，并且可以强制选择文件编码  #FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容  #FileReader.abort() // 终止读取操作

FileReader事件

#FileReader.onloadstart // 读取操作开始时触发  #FileReader.onload // 读取操作成功时触发  #FileReader.onloadend // 读取操作完成时触发(不论成功还是失败)  #FileReader.onprogress // 读取操作过程中触发  #FileReader.onabort // 读取操作被中断时触发  #FileReader.onerror // 读取操作失败时触发

FileReader属性

#FileReader.result // 读取的结果(二进制、文本或DataURL格式)  #FileReader.readyState // 读取操作的状态(EMPTY、LOADING、DONE)

代码示例

举例一：控制file控件，读取其中的第二个文件，并将其文本内容在控制台输出

var input = document.querySelector('input[type="file"]'); // 找到***个file控件  var firstFile = input.files[0]; // file控件的files特性其实就是一个FileList类型的对象  var secondFile = input.files[1]; // 当file控件的multiple特性为true时，我们可以同时选择多个文件，通过input.files[n]可以按序访问这些文件  var reader = new FileReader(); // 新建一个FileReader类型的对象  reader.readAsText(secondFile); // 按文本格式读取file控件中的第二个文件  reader.onloadend = function (e) { // 绑定读取操作完成的事件      console.log(reader.result); // 取得读取结果并输出  };

举例二：给一个含utf-8编码的文本文件file去掉BOM头信息

var size = file.size; // 先取得文件总字节数  var result = file.slice(3, size - 3); // 用slice方法去掉开头的3个字节

***，对FileAPI实践的三点注意

1. 由于规范尚未截稿，#File.urn尚存较大变数，webkit并未实现此特性

2. #Blob.slice在webkit内核中加入了前缀，即#Blob.webkitSlice，且第二个参数不是“length”，而是“end”，话句话说，上面的示例二应改为file.webkitSlice(3, size)才能生效

3. 规范中还明确规定了各种出错处理和异常处理，这些内容是同样重要的：不论对于一套完备的规范，还是对于一个健壮的程序而言。

上述就是小编为大家分享的HTML 5中怎么利用FileAPI对文件进行处理了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。