本篇教程探讨了对HTML5 File对象的读写组件编写，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

安装

npm install html5-file-js

使用

具体的用法在ReadMe中都有写到，就不废话了。

readChucks 的链式读取

这个链式读取主要是对Blob对象进行分割，利用闭包保存当前的读取进度和下一步需要分割的起点，在FileReader的 onload 事件中判断是否需要读取完成，未完成则继续分割下一部分进行读取。在代码中完全舍弃掉了 onerror 事件来处理异常的方法，而是将 FileReader 的error属性传入回掉函数进行处理，在外部调用就变得简单了很多，内部也少了不少代码，但是没有具体测试，不知道会发生什么不可预测的问题。

promisify

这回写的组件全部提供了 promisified 的调用方法，说来也很简单，就是返回一个 Promise 对象，在回调函数中判断如果没有异常则 resolve，有异常就 reject。（突然想起来前段时间面试官问我Promise有几种状态，明明有3中我却说了两种，面试官还没提出质疑，太给面子了）这样的好处当然很多，书写简单且易维护，还能避免由于异步执行而产生的错误。

写入File

现在只支持写入一个字符串或者写入一个 ArrayBuffer。
写字符串比较简单，读出原来File中的字符串然后拼接起来再 new 一个 File 对象就好了（new 了无数个对象了，就是没有对象！！！）。
写 ArrayBuffer 就要读出原来 File 中的 buffer，对两个 buffer 都取一个 Uint8Array 的 TypedArray，然后针对这两个buffer的长度新建一个ArrayBuffer，再前后把两个 buffer 写进去再 new 一个 File 对象（实在不想多写字了）

待解决的问题

分段读取文件为字符串时编码问题

分段读取文件的时候总是有可能从某一个字符中间切分开，而每一小段数据又会单独运行回调函数，就导致了在段尾出现乱码的问题，由于本人对编码了解实在太少，尚不能得出一个有效的解决办法。

还没有引入 Worker

考虑到文件的读写实际上是很消耗资源的操作，最好是使用 Worker 多线程进行处理，但是实测过，如果没有对文件进行加密等复杂操作，只是读取文件，读取的速度比起DOM操作的速度可是能快上100倍以上，而Worker又不能解决DOM操作速度的问题，就先没有引入Worker。

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！