40

当readAsText()函数完成时，结果存储在.result

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

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

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

4

5 回答 5

69

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

于 2012-12-05T17:53:03.063 回答
5

即使在在线阅读了文档和示例之后，我也花了 300 个小时才弄清楚......

这是一些实际的工作代码：

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

另外，仅供参考：

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

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

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

于 2020-07-03T02:53:22.987 回答
1

这是一个完整的 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.

<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>
于 2019-12-07T06:42:53.987 回答
1

是的，文件 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>
于 2020-10-29T09:50:30.853 回答
0 

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

于 2021-03-19T05:28:49.383 回答