我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:前端js代码,如何利用FileReader半自动读取文件内容? - js-filereader
前端js代码,如何利用FileReader半自动读取文件内容?(图6-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔和计算机代码的故事。本文测试环境:谷歌浏览器@108.0.5359.125。

利用前端upload组件

在本文中,前端upload组件仅仅是个幌子,并不会真正触发上传,仅仅用于提取要分析的文件。

<input type="file" id="file_input" multiple="multiple" accept=".jpeg,.jpg,.gif,.png,.txt,.log,.html"/>
<script type="text/javascript">
  var file_obj = document.getElementById("file_input");
  file_obj.onchange = function () {
    var files = file_obj.files;
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      if (file.type.startsWith("image/")) {
        doReadBase64(file);
      } else if (file.type.startsWith("text/")) {
        doReadText(file);
      } else {
        doReadBuffer(file);
      }
    }
  };
</script>

这里根据文件的type类型来做不同的处理。值得特别说明的是:这些file.type其实是根据文件后缀进行解析的,系统自动进行解析的,并不是根据文件头进行解析的。也就是说,相同的文件如果后缀不同,那么会被解析出不同的file.type

苏南大叔:前端js代码,如何利用FileReader半自动读取文件内容? - code-1
前端js代码,如何利用FileReader半自动读取文件内容?(图6-2)

readAsDataURLbase64字符串

function doReadBase64(file) {
  var reader = new FileReader();
  reader.onload = function () {
    console.log("Base64", reader.result);
    // document.getElementsByTagName("img")[0].src=reader.result;
  };
  reader.readAsDataURL(file);
}

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

苏南大叔:前端js代码,如何利用FileReader半自动读取文件内容? - code-2
前端js代码,如何利用FileReader半自动读取文件内容?(图6-3)

相关文章:

readAsText,可以读取到字符串

对于文本类型(比如:.txt/.html)的文件来说,读取到字符串就可以直接对文字进行分析了。

function doReadText(file) {
  var reader = new FileReader();
  reader.onloadend = function () {
      console.log("text", reader.result);
  };
  reader.readAsText(file);
}

这个应用场景,比如:直接载入一个.txt文件,并把内容显示在文本框里面。

苏南大叔:前端js代码,如何利用FileReader半自动读取文件内容? - readtext
前端js代码,如何利用FileReader半自动读取文件内容?(图6-4)

readAsArrayBuffer,分段读取为buffer

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

function doReadBuffer(file) {
  let reader = new FileReader();
  /*
  reader.onloadstart = function () {
    // 开始读取
  };
  reader.onprogress = function (p) {
    // "正在加载 Bytes:" + p.loaded + "/" + file.size
  };
  reader.onload = function () {
    // 加载完成
  };
  */
  reader.onload = function () {
    if (reader.error) {return;}
    let buffer = new Uint8Array(reader.result);
    console.log("buffer", reader.result, buffer);
  };
  // reader.readAsArrayBuffer(file.slice(0, 20));
  reader.readAsArrayBuffer(file);
}

苏南大叔:前端js代码,如何利用FileReader半自动读取文件内容? - code-3
前端js代码,如何利用FileReader半自动读取文件内容?(图6-5)

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

苏南大叔:前端js代码,如何利用FileReader半自动读取文件内容? - 运行截图
前端js代码,如何利用FileReader半自动读取文件内容?(图6-6)

可以看到正是对应的asii码。

参考文字:

结束语

更多js经验文章,请点击苏南大叔的博客文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js