javascript - html5的filereader读取txt

问题描述

问 题

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."

解决方案

不知道题主没有去读过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

这篇关于javascript - html5的filereader读取txt的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！