【JavaScript】HTML5 纯JS使用 FileReader 以指定的编码格式GB2312/UTF-8打开并读取txt文本文件

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2023年11月28日 23:56 本文热度 941

最近有从本地读取txt文件的需要，奈何网上搜索js读取本地txt，都是新建一个fso对象，即（FileSystemObject）。自己试了半天不好使（后来发现貌似只能在IE上跑）。于是使用H5的fileReader来解决问题。

fileReader Api

flieReader 三种状态：

FileReader.readyState: 0,1,2

0: empty ,没有文件被load，为空。
1: loading,文件正在被加载。
2: done,读取请求完成。

fileReader事件处理，6种。

1、onabort:文件读取终端，触发。

2、onerror:文件遇到错误触发。

3、onload:文件成功读取触发。

4、onloadstart:文件开始读取时触发。

5、onloadend:文件读取结束时触发（无论成功失败）。

6、onprogress:文件读取中触发。

fileReader读取方法，5种。

1、FileReader.abort()。中断读取操作，读取状态返回为done，即readyState=2。

2、FileReader.readAsArrayBuffer()。将文件读取为ArrayBuffer形式。

3、FileReader.readAsBinaryString() 。将文件读取为二进制字符串（非标准方法，不推荐使用）。

4、FileReader.readAsDataURL()。读取文件的URL,应用场景，本地预览图片。

5、FileReader.readAsText()。将文件已文本形式读取。即读取txt等，此处可以指定要读取文件的编码格式：GB2312、UTF-8等。

读取file代码示例(5为例)：

HTML:

<input type="file" ng-model="my_file" id="my_file" style="display: none;">
<button value="导入" ng-click="myfile()"></button>

JS:

$scope.myfile = function () {
      $("#my_file").click();
    }
    $("#my_file").bind('change', function (source) {
 
      var file = document.getElementById("my_file").files[0];
      var reader = new FileReader();
 
      //将文件以文本形式读入页面
      reader.readAsText(file, "gb2312");
      reader.onload = function (e) {
        var fileText = e.target.result.split("\n");
        angular.forEach(fileText, function (data, index) {
          if (data.length) {
            data = data.split(',')
            $scope.persons.push(_.zipObject(['position', 'calculate', 'maxCalculate', 'minCalculate'], data));
          }
        })
        $scope.$apply();
      }
    })

reader.readAsText(file, "gb2312");

开始没有注明“gb2312”，读取txt之后，文件显示乱码。注明后解决。

该文章在 2023/11/28 23:56:52 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。