HTML5文件API：如何查看readAsText()的结果

Question

HTML5文件API：如何查看readAsText()的结果

41

readAsText() 函数完成后，结果将存储在 .result 中。

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

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

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

- user32262

5个回答

5

这让我花了大约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 事件的处理程序。每次读取操作成功完成时都会触发此事件。

- Andrew

1

最佳答案。运行得很好。 - chichilatte

2

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

- Dificilcoder

1

是的，File API 的文档很差。在 onload 之前调用了 readAsText 方法。

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>

- tim-montague

1

这是一个完整的HTML和原生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>

- Glen Pierce

这是对我来说最快的启动选项。有没有一种方法可以简单地“硬编码”文件名？我尝试过“检查”event.target.files[0]，但无法看到实际的路径/文件名放置在哪里。这将节省我每次选择它时点击几下的时间。 - Eric Manley

我认为这是不可能的，因为这样会授予访问主机文件系统的权限，而该系统可能受到保护。我怀疑允许任意网站选择要下载的文件可能具有安全隐患。 - Glen Pierce

你可能可以将文件拖放到按钮上。 - Glen Pierce

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lostsource · Accepted Answer

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

尝试类似这样的代码：

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

更多信息请查看：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader