2
  1. 描述你的问题
    想做一个HTML5的小说阅读器,用filereader读取txt、pdf等文件。换了好几种方式,总是不对。求教。

  2. 贴上相关代码
    第一种:
    <script>

     var f=new FileReader();
     var neirong=f.onload.readAsText("111.txt",["utf-8"]);
     document.getElementsByClassName("reader")=neirong;

    </script>

第二种:

<script>
  var f;

  f.onload=function neirong(e){
      document.getElementsByClassName("reader")=e.result;
  }
 document.getElementsByClassName("reader").addEventListener("click",neirong,false);

</script>

第三种:
<script>

  var fso,f,neirong;
  fso=new ActiveXObject("Scripting.FileSystemObject");
  f=fso.OpenTextFile("111.txt",1,false);

  neirong=f.ReadAll();
  
</script>
  1. 贴上报错信息

  2. 贴上相关截图

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

    <script>

     var f=new FileReader();
     f.onload=function(e){
         this.result;
     }
     var neirong=f.readAsText("111.txt");
     document.getElementsByClassName("reader").innerHTML=neirong;

    </script>

这个,提示"Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': The argument is not a Blob."

lingyu 138
2016-02-18 提问
1 个回答
5

已采纳

不知道题主没有去读过File相关的API,如果没有的话建议还是去读一下可能了解更多。
FileReader是HTML5增加的用来处理异步操作浏览器读取本地文件的接口,他处理的对象是File对象或者是Blob对象。所以你往readAsText里面传文件名是没有什么用的。你可以用一个input来获取你本地的文件,然后交由FileReader来读取。
html:

  <input type="file" id="input">
  <span id="preview"></span>

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);
  }
})();

示例:http://jsbin.com/koxuhuduro/edit?html,js,console,output

撰写答案

推广链接