发表新帖
发表新帖

HTML5 File API: How to see the result of readAsText()

后端 未结
关注
4 713
野趣味
野趣味 2020-12-08 04:30

When readAsText() function is completed the result is stored in .result

How do I see if the content of the file read are correct in .

相关标签:
4条回答
  • 小鲜肉
    2020-12-08 04:51

    Yeah, the File API is poorly documented. The readAsText method is called before 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>
    0 讨论(0)
  • 悲&欢浪女
    2020-12-08 04:54

    This took me like 300 hours to figure out even after reading the documentation and examples online...

    Here's some actual, working code:

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

    Also, FYI:

    FileReader.onabort A handler for the abort event. This event is triggered each time the reading operation is aborted.

    FileReader.onerror A handler for the error event. This event is triggered each time the reading operation encounter an error.

    FileReader.onload A handler for the load event. This event is triggered each time the reading operation is successfully completed.

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-08 05:11

    This is a complete html and vanilla javascript example that creates a simple file input and a file reader that reads the file with FileReader.readAsText()then writes the text content of that file to the console. This works well for files like .txt or .csv.

    There are also FileReader.readAsArrayBuffer(), FileReader.readAsBinaryString(), and FileReader.readAsDataURL() which might work better for other use cases. I also recommend reading https://developer.mozilla.org/en-US/docs/Web/API/FileReader

    Note: Users can select multiple files to include in the input, this code will only read the first of those files (as you can see in the reference to the [0] element in 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>
    0 讨论(0)
  • 陌清茗
    2020-12-08 05:12

    readAsText is asynchronous, so you would need to use the onload callback to see the result.

    Try something like this,

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

    Further information here,

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

    0 讨论(0)
 看不清?
提交回复
热议问题