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