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函数）

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

1 个答案: