html5如何读取txt,【Web前端问题】html5的filereader读取txt

描述你的问题

想做一个HTML5的小说阅读器，用filereader读取txt、pdf等文件。换了好几种方式，总是不对。求教。

贴上相关代码

第一种：

var f=new FileReader();

var neirong=f.onload.readAsText("111.txt",["utf-8"]);

document.getElementsByClassName("reader")=neirong;

第二种：

var f;

f.οnlοad=function neirong(e){

document.getElementsByClassName("reader")=e.result;

}

document.getElementsByClassName("reader").addEventListener("click",neirong,false);

第三种：

var fso,f,neirong;

fso=new ActiveXObject("Scripting.FileSystemObject");

f=fso.OpenTextFile("111.txt",1,false);

neirong=f.ReadAll();

贴上报错信息

贴上相关截图

已经尝试过哪些方法仍然没解决(附上相关链接)

var f=new FileReader();

f.οnlοad=function(e){

this.result;

}

var neirong=f.readAsText("111.txt");

document.getElementsByClassName("reader").innerHTML=neirong;

这个，提示”Uncaught TypeError: Failed to execute ‘readAsText’ on ‘FileReader’: The argument is not a Blob.”

回答：

不知道题主没有去读过File相关的API，如果没有的话建议还是去读一下可能了解更多。

FileReader是HTML5增加的用来处理异步操作浏览器读取本地文件的接口，他处理的对象是File对象或者是Blob对象。所以你往readAsText里面传文件名是没有什么用的。你可以用一个input来获取你本地的文件，然后交由FileReader来读取。

html:

javascript:

(function(){

var input = document.querySelector('#input');

var span = document.querySelector('#preview');

input.addEventListener('change', function(e){

handFile(e.target.files[0]);

});

function handFile(file){

console.log('hand');

var reader = new FileReader();

reader.onload = function(e){

span.innerText = e.target.result;

};

reader.readAsText(file);

}

})();