js 通过FileReader实现上传文件并读取文件

通过FileReader实现上传文件并读取文件

FileReader对象中有一个.readAsText方法 这个方法有两个参数（file,编码）
这个方法没有返回值，方法执行完之后，数据会存放在.result中

HTML：

  <input type="file" id="choose" onchange="showText()"><br><br>
  <textarea id="demo" cols="30" rows="10"></textarea>

JS：

    function showText(){
      var choose = document.getElementById('choose');
      var demo = document.getElementById('demo');
      var fr = new FileReader(); //new一个新的FileReader对象
      var file = choose.files[0]; //将上传的第一个文件传给变量file
      fr.onload = function(event){ //.onload 但fr执行完之后 执行匿名函数
        demo.value = event.target.result; // event.target 表示谁调用了event，此处为fr
        // fr.result 传给了demo.value
        // 此处产生了闭包  匿名函数被放在了showText函数外执行 
      }
      fr.readAsText(file); //这个读取文件内容放后面也行，因为前面产生了闭包，所以前面的匿名函数在showText执行完之后执行
    }

event.target.nodeName 　　//获取事件触发元素标签名（li，p，div，img，button…）
event.target.id　　　　　　//获取事件触发元素id
event.target.className　　//获取事件触发元素classname
event.target.innerHTML　 //获取事件触发元素的内容（li）

原文地址：https://www.qianqianhaiou.cn/index.php/archives/82/