javascript - FileReader readAsText 将文件内容作为字符串存储在结果属性中，但是当 console.log 这个结果时，没有返回任何内容。

Question

在 HTML 文件中，我创建了一个上传文件的按钮:

 <span id='upload' class="btn btn-default btn-file">Upload<input type="file" id="input" onchange="this.files"></span>

在 JavaScript 文件中:

//this event click event on the upload buttom, and parse filelist to handleFiles function:
 var upload_btn = document.getElementById('upload');
    if (upload_btn) {
      //this.uploadSet.bind(this);
          var inputElement = document.getElementById("input");
          upload_btn.onclick = inputElement.addEventListener("change", this.handleFiles, false);
    }

handleFiles函数:

handleFiles: function() {
  var fileList = this.files; /* now you can work with the file list */
  console.log(fileList);
  var file = fileList[0];
  var fr = new FileReader();

 fr.readAsText(file,"utf-8");

  console.dir(fr);

  }

在浏览器控制台中，它返回带有名为“result”的属性的filereader对象，其中包含文件内容的文本。在控制台中，它看起来像这样:

FileReader{}
  error: null
  onabort: null
  onerror: null
  onload: null
  onloadend: null
  onloadstart: null
  onprogress: null
  readyState: 2
  result: "!Name: acorn↵!↵.O.....↵...O...↵OO..OOO↵"
  __proto__: FileReader

但是，当我尝试执行 console.log(fr.result) 时，控制台什么也没返回。并且它没有抛出错误。我不确定这里出了什么问题。有没有办法从 FileReader 读取这个结果？

Answer 1

尝试用 label 元素(包括 for="input" 属性)替换 span 元素，为 onchange 调用单个处理程序> input 元素的事件

var upload = document.getElementById("upload");

function handleFiles(e) {

  var reader = new FileReader();

  reader.onloadend = function(e) {
    console.dir(e.target.result);
  }

  reader.readAsText(e.target.files[0])

}

upload.onchange = handleFiles;

label input {
  visibility:hidden; 
}

<label for="input" id='upload' class="btn btn-default btn-file">Upload<input type="file" id="input" accepts="text/plain"></label>