fileReader.readAsText（）JavaScript：未显示结果

Question

我正在处理一个html项目，其中用户上传了一个txt文件，其内容将得到进一步处理并显示结果。 上载和处理步骤工作正常，但从某种程度上讲，结果从未显示出来。 （对我而言）令人困惑的部分是，如果我在处理和结果表示之间添加了alert（），则结果将正确显示。

这是我所缺少的已知问题吗？

在下面的代码示例中，如果删除了alert（）上的注释，则结果将在“演示”段落中正确显示。 但是没有它，什么也没显示。

对于我对错误的解释或替代解决方案，我将不胜感激。

非常感谢你！

 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是异步的，因此当您添加警报时，在将文本添加到demo元素之前，您有足够的时间调用代码onload。 当您将其添加到演示元素中时，没有设置警告textFromFileLoaded （通过onload函数）