javascript - fileReader.readAsText() JavaScript : result not displayed

Question

我正在开发一个html项目，其中用户上传一个txt文件，其内容被进一步处理并显示结果。上传和处理步骤工作正常，但不知何故，结果从未显示。 (对我来说)令人困惑的部分是，如果我在处理和结果呈现之间添加一个alert()，结果就会正确显示。

这是我遗漏的已知问题吗？

在下面的代码示例中，如果删除alert()的注释，结果将正确显示在“demo”段落中。但如果没有它，就不会显示任何内容。

如果您能解释我的错误或提供替代解决方案，我将不胜感激。

非常感谢!

function myFunction() {
  var x = document.getElementById("file");
  var textFromFileLoaded = "";
  if (x.value != "") { // text upload
    var file = x.files[0];
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) {
      textFromFileLoaded = fileLoadedEvent.target.result;
    }
    fileReader.readAsText(file, "UTF-8");
  }
  //alert("somth"); //HERE
  document.getElementById("demo").innerHTML = textFromFileLoaded;
  return true;
}

Select a file to upload:
<input type="file" id="file" size="50" accept="image/*">
<button onclick="myFunction()">button</button>
<p id="demo"></p>

Answer 1

您应该将 document.getElementById("demo").innerHTML = textFromFileLoaded; 放在 onload 函数内

fileReader.onload = function(fileLoadedEvent) {
  textFromFileLoaded = fileLoadedEvent.target.result;
  document.getElementById("demo").innerHTML = textFromFileLoaded;
}

Filereader是异步的，因此当您添加警报时，您需要给代码足够的时间来调用 onload，然后再将文本添加到演示元素中。如果没有警报，当您将 textFromFileLoaded 添加到演示元素时，不会设置(从 onload 函数)