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

这篇文章发布于 2018年03月27日,星期二,23:02,归类于 JS实例。 阅读 21483 次, 今日 24 次 11 条评论

 

一、何为文本类文件?

所谓文本类文件,指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文档之后的信息

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

以上~感谢阅读!

(本篇完)

分享到:
×


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

  1. 浮生若梦说道:

    有个问题就是,编码格式,readAsText 默认是utf-8,比如txt 有的读出来是乱码,用 gb2312 格式能解决,但是 这样一来,utf-8 格式读出来 也是乱码,不知道 这个是不是它的硬伤呢,或者前端有什么其他办法可解决吗

  2. 李俊毅说道:

    那怎么正确显示doc文件,而不乱码

  3. 李星阳说道:

    // ▼下载文字为文件的方法
    var funDownload = function (content, filename) {
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    // 创建隐藏的可下载链接
    var eleLink = document.createElement(‘a’);
    eleLink.download = filename;
    eleLink.href = URL.createObjectURL(blob);
    eleLink.click(); // 触发点击

    // ■■■■■■■■■■■■■■■鑫旭老师好:我发现下面几行代码注释后下载依然有效■■■■■■■■■■■■■■■■■■■■
    // eleLink.style.display = ‘none’;
    // document.body.appendChild(eleLink);
    // document.body.removeChild(eleLink); // 然后移除
    };

  4. 张泽雨说道:

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

  5. 7P_LonG说道:

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

  6. 笼子说道:

    最近好高产

  7. 小媒体说道:

    可以尝试做照片压缩的

  8. 码农说道:

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