前端js代码，如何利用FileReader半自动读取文件内容？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔的“程序如此灵动”博客，记录苏南大叔和计算机代码的故事。本文测试环境：谷歌浏览器@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。

readAsDataURL，base64字符串

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字符串是可以直接放在img的src属性里面的，也就是说可以用于"预览"图像。

相关文章：

• https://newsn.net/say/node-img-base64.html

readAsText，可以读取到字符串

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

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

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

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);
}

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

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

参考文字：

• https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer

结束语

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

• https://newsn.net/tag/js/

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