小tips: 纯前端JS读取与解析本地文本类文件

这篇文章发布于 2018年03月27日,星期二,23:02,归类于 js实例。 阅读 4023 次, 今日 108 次

一、何为文本类文件?

所谓文本类文件,指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文件,此时会自动触发“开始处理”按钮;

选择CSS文件 选择CSS文件

2. 下载CSS文件:

下载CSS文件

下载后的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文档。结果出来的东西鬼都不认识:

读word文档之后的信息

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

以上~感谢阅读!

(本篇完)

分享到:

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想高薪入职阿里? ×
想要免费一对一编程辅导? ×


发表评论(目前8 条评论)

  1. 张泽雨说道:

    我站申请对本章关于前端技术全站转载,用于学习交流,同时保留贵站的版权与出处!我站不会附加任何版权信息!

  2. 7P_LonG说道:

    捉个虫
    二节第一行
    “已知file就是文件对象,则核心CSS如下:”

  3. 笼子说道:

    最近好高产

  4. 小媒体说道:

    可以尝试做照片压缩的

  5. 码农说道:

    有个大胆的想法:把word文档拖进浏览器进行编辑…