byzhangxinxu 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 对象通常有下面几种方式获取:
type=file 表单元素, 假设 DOM 元素是 eleFile , 则 file 对象 (假设非多选模式) 为 eleFile.files[0] 或者也可以在 change 事件中获取, 例如:
- eleFile.onchange = function (event) {
- var file = event.target.files[0];
- };
拖拽事件获取例如:
- 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.tuicool.com/articles/iI3ERnf