by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7463
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、何为文本类文件？

所谓文本类文件，指MIME Type为text/*文件，例如，CSS文件（text/stylesheet），JS文件（text/javascript），HTML文件（text/html），txt文本（text/plain）等等。

在现代浏览器下，我们可以直接对这些文件进行处理，无论是通过type=file表单元素还是从桌面拖拽到网页中都是可以的。

二、纯前端JS读取与解析本地文本类文件

已知file就是文件对象，则核心CSS如下：

var reader = new FileReader();
reader.onload = function (event) {
    // event.target.result就是文件文本内容
    // 然后你就可以为所欲为了
    // 例如如果是JSON数据可以解析
    // 如果是HTML数据，可以直接插入到页面中
    // 甚至字幕文件，各种滤镜，自定义文件格式，都可以玩弄于鼓掌之间……
};
reader.readAsText(file);

核心就是readAsText()这个方法，我们可能有用过的前端预览本地图片，则用的是FileReader.readAsDataURL()方法，一个转文本，一个转base64，性质都是一样的。

目前file对象通常有下面几种方式获取：

1. type=file表单元素，假设DOM元素是eleFile，则file对象（假设非多选模式）为eleFile.files[0]。或者也可以在change事件中获取，例如：

   eleFile.onchange = function (event) {
       var file = event.target.files[0];
   };

2. 拖拽事件获取。例如：

   this.dragDrop.addEventListener("drop", function(event) { 
       var file = event.dataTransfer.files[0];
   }, false);

三、实践-实现一个纯前端的简易CSS压缩工具

您可以狠狠地点击这里：CSS在线压缩工具demo

此工具差不多10年了，然后趁此机会加个直接上传CSS压缩功能。操作演示如下：

1. 选择CSS文件，此时会自动触发“开始处理”按钮；

2. 下载CSS文件：

这里的下载功能也是纯前端实现的，有兴趣可以参见之前的文章：“JS前端创建html或json文件并浏览器导出下载”。

相关代码直接右键->查看页面源代码即可！

四、结束语

FileReader对象除了有readAsText()和readAsDataURL()外，还有下面2个标准方法，分别是：FileReader.abort()和FileReader.readAsArrayBuffer().

FileReader.abort()可以终止读操作。

FileReader.readAsArrayBuffer()作用是把Blob或者file对象以ArrayBuffer形式读出来。因此，可以罗列下：

• readAsText() -> 文本字符数据
• readAsDataURL() -> Base64 URL数据
• readAsArrayBuffer() -> ArrayBuffer数据

对于非文本类文件，readAsText()方法也是可以用的，但是读出来的东西……呵呵，怕是用不起来，例如我选一个.docx word文档。结果出来的东西鬼都不认识：

所以，标题中特别标明了文本类文件。

以上~感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=7463

（本篇完）