HTML5 用FileReader对象读取文本

Hillbox

已于 2022-08-14 22:50:55 修改

阅读量718

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 前端 javascript

于 2022-08-14 21:59:26 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33514421/article/details/126336989

html5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用FileReader对象读取本地文件内容，并通过一个示例展示了如何使用JavaScript读取用户选择的文本文件，采用utf-8编码进行读取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FileReader对象可以用来读取File对象所包含的文件内容。暂时不明白以书上写的gbk编码方式读取纯文本为什么会乱码，这里只是先把书上gbk编码改成了utf-8。

FileReader.readAsText(File对象，编码方式) ，该方法用于读取文本。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <script>
    window.onload = function () {
      var oFile = document.getElementById("file");
      oFile.onchange = function(){
        //获取第1个文件
        var file = oFile.files[0];
        //读取本地文件，以utf-8编码方式输出
        var reader = new FileReader();
        reader.readAsText(file, "utf-8");
        reader.onload = function(){
          console.log(this.result);
        };
      };
    }
  </script>
</head>
<body>
  <input id="file" type="file" />
</body>
</html>