HTML5 FileReader 读取txt文件

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种。

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

onerror:文件遇到错误触发。

onload:文件成功读取触发。

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

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

onprogress:文件读取中触发。

fileReader读取方法，5种。

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

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

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

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

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