Question

完成readAsText()功能后，结果将存储在.result

中

如何在.result中查看所读取文件的内容是否正确？

 fr = new FileReader();
 fr.readAsText(file);
 var x = fr.result;
 console.log(x); //does not display anything on console

现在如何显示.result对象以验证内容？

Answer 1

readAsText是异步的，因此您需要使用onload回调来查看结果。

尝试这样的事情，

var fr = new FileReader();
fr.onload = function(e) {
    // e.target.result should contain the text
};
fr.readAsText(file);

此处有更多信息，

https://developer.mozilla.org/en-US/docs/DOM/FileReader

Answer 2

即使在线阅读了文档和示例，我仍然花了300个小时来弄清楚...

以下是一些实际的有效代码：

let fileReader = new FileReader();
fileReader.onload = function(event) {
    alert(fileReader.result);
};
inputElement.onchange = function(event) {
    fileReader.readAsText(event.target.files[0]);
};

另外，FYI：

FileReader.onabort abort事件的处理程序。每次读取操作中止时都会触发此事件。

FileReader.onerror error事件的处理程序。每次读取操作遇到错误时都会触发此事件。

FileReader.onload load事件的处理程序。每次读取操作成功完成都会触发此事件。

Answer 3

是的，文件API的文档记录很少。 readAsText方法在onload之前被调用。

let onFileChange = (event) => {
  let file = event.target.files[0];

  let fileReader = new FileReader();
  fileReader.readAsText(file);

  fileReader.onload = (event) => {
    let fileAsText = event.target.result;
    console.log(fileAsText);
  };
};

<form>
  <input type="file" onChange={onFileChange} />
</form>

Answer 4

async FileUploadHandler(e){
  let readInputFile = await inputFileReader(e);
}

async inputFileReader(event){
  return new Promise((res,rej)=>{
    let input = event.target;
    let reader = new FileReader();
    reader.onload = function(){
      res(reader.result)
    };
    reader.readAsText(input.files[0]);
  });
},

<input type="file" on-change="FileUploadHandler" />

Answer 5

这是一个完整的html和vanilla javascript示例，它创建一个简单的文件输入，一个文件读取器使用FileReader.readAsText()读取文件，然后将该文件的文本内容写入控制台。这对于.txt或.csv这样的文件效果很好。

还有FileReader.readAsArrayBuffer()，FileReader.readAsBinaryString()和FileReader.readAsDataURL()对于其他用例可能会更好。我还建议您阅读https://developer.mozilla.org/en-US/docs/Web/API/FileReader

注意：用户可以选择多个文件以包含在输入中，此代码将仅读取其中的第一个文件（如在event.target.files中对[0]元素的引用中所看到的。

<html>
  <head>
    <script>
      window.onload = function(event) {
        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
      }

      function handleFileSelect(event) {
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
          console.log(event.target.result);
        }
        var file = event.target.files[0];
        fileReader.readAsText(file);
      }
    </script>
  </head>
  <body>
    <input type="file" id="fileInput">
  </body>
</html>

HTML5文件API：如何查看readAsText（）的结果

5 个答案: