HTML 5中的文件处理之FileAPI

在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是js最擅 长的处理之一。但文件处理,尤其是二进制文件处理,一直是个空白。在一些情况下,我们不得不通过Flash/ActiveX/NP插件或云端的服务器处理 较为复杂或底层的数据。今天,HTML5的一系列新规范正在致力于让浏览器具备更强大的文件处理能力。

AD:

在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是js最擅长的处理之一。但文件处 理,尤其是二进制文件处理,一直是个空白。在一些情况下,我们不得不通过Flash/ActiveX/NP插件或云端的服务器处理较为复杂或底层的数据。 今天,HTML5的一系列新规范正在致力于让浏览器具备更强大的文件处理能力。

今天要介绍的FileAPI,就是为解决这类问题而生的。

总览

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接口

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

Blob接口

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

File接口

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

FileReader方法

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

FileReader事件

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

FileReader属性

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

代码示例

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

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

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

  1. var size = file.size; // 先取得文件总字节数  
  2. 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. 规范中还明确规定了各种出错处理和异常处理,这些内容是同样重要的:不论对于一套完备的规范,还是对于一个健壮的程序而言。由于篇幅有限,这部分就不细说了,大家可以在W3C官网自由查阅

以上就是FileAPI的简单介绍。万丈高楼平地起,后面的文件操作会更神奇更有趣。

个人整理学习路线&笔记icon-default.png?t=N4P3https://mp.weixin.qq.com/s/KQx_eIwdjCj3QdErxKb7ZQ

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用HTML5 FileReader API读取Excel文件,可以使用以下步骤: 1. 在HTML页面添加一个文件上传控件,例如: ```html <input type="file" id="fileInput" /> ``` 2. 使用JavaScript获取文件上传控件,并添加一个`change`事件监听器来获取用户选择的文件: ```javascript const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', handleFileSelect, false); function handleFileSelect(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = handleFileLoad; reader.readAsBinaryString(file); } ``` 在这个示例,我们获取了文件上传控件元素,并为其添加了一个`change`事件监听器。当用户选择了一个文件时,事件监听器会调用`handleFileSelect`函数来处理文件。 3. 在`handleFileSelect`函数,我们创建了一个`FileReader`对象,并使用`readAsBinaryString`方法将文件读入内存: ```javascript function handleFileSelect(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = handleFileLoad; reader.readAsBinaryString(file); } ``` 注意,我们使用了`readAsBinaryString`方法来读取二进制数据,因为Excel文件是二进制文件。 4. 一旦文件被读入内存,`FileReader`对象的`onload`事件将会被触发。我们可以在事件处理函数访问文件的二进制数据: ```javascript function handleFileLoad(event) { const data = event.target.result; const workbook = XLSX.read(data, { type: 'binary' }); const sheetName = workbook.SheetNames[0]; const sheet = workbook.Sheets[sheetName]; const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 }); console.log(jsonData); } ``` 在这个示例,我们使用`XLSX.read`方法来将二进制数据转换成一个`Workbook`对象。然后,我们选择要读取的工作表,并将其转换成JSON格式的数据。最后,我们将数据打印到控制台上。 需要注意的是,这个示例代码只是一个简单的例子。在实际应用,你可能需要处理更复杂的Excel文件,例如包含多个工作表或带有复杂格式的表格。你需要根据具体情况进行相应的处理

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值