前端js代码,如何利用FileReader半自动读取文件内容?
发布于 作者:苏南大叔 来源:程序如此灵动~

本文描述如何利用FileReader
读取文件内容,注意本文描述的是前端网页js
读取文件内容,而不是nodejs
读取文件内容,也不是php
后端读取文件内容。因为对于后两者来说,这个是很正常的操作。而对于前端来说,能够读取文件内容,是一件不是很正常的事情。前端网页是没有主动读取文件的能力的,但是有半自动的方式,可以读取分析本地文件!

苏南大叔的“程序如此灵动”博客,记录苏南大叔和计算机代码的故事。本文测试环境:谷歌浏览器@108.0.5359.125。
利用前端upload
组件
在本文中,前端upload
组件仅仅是个幌子,并不会真正触发上传,仅仅用于提取要分析的文件。
这里根据文件的type
类型来做不同的处理。值得特别说明的是:这些file.type
其实是根据文件后缀进行解析的,系统自动进行解析的,并不是根据文件头进行解析的。也就是说,相同的文件如果后缀不同,那么会被解析出不同的file.type
。

readAsDataURL
,base64
字符串
这个函数,虽然是readAsDataURL
。但是实际上得到的是个base64
字符串。那么,对于img
图标来说,这个base64
字符串是可以直接放在img
的src
属性里面的,也就是说可以用于"预览"图像。

相关文章:
readAsText
,可以读取到字符串
对于文本类型(比如:.txt/.html)的文件来说,读取到字符串就可以直接对文字进行分析了。
这个应用场景,比如:直接载入一个.txt
文件,并把内容显示在文本框里面。

readAsArrayBuffer
,分段读取为buffer
或者说读取到asii
码,因为这些类型的文件一般都比较大,所以可以监控各种事件以及是否发生错误信息等。

这个举个例子,文件的实际内容是:1234567890
。那么读取到的数据,如下图所示:

可以看到正是对应的asii
码。
参考文字:
结束语
更多js
经验文章,请点击苏南大叔的博客文章:


