A-A+

HTML5 FileReader 读取txt文件

2018年08月29日 javascript 暂无评论 阅读 11 views 次

JS读取本地txt

最近有从本地读取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等。

读取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之后,文件显示乱码。注明后解决。

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: