如何使用 FileReader 將文件內容加載到變量

Question

關於使用 javascript 中的輸入元素將 txt 文件內容加載到變量中，我想尋求一些幫助。

所以我正在使用與 html 文件分開的 java 腳本文件，當用戶單擊按鈕從 html 端加載文件時，如下所示：

<input type="file" id="selectedFile" accept=".txt" />

它會觸發 onchange 事件，如下所示

document.getElementById('selectedFile').addEventListener('change', function () {
    var fr = new FileReader();
    fr.onload = function () {
        document.getElementById('display').textContent = fr.result;
        console.log(fr.result);
    }
    fr.readAsText(this.files[0]);
})

基本上，如果我在上面的代碼中控制台記錄 fr.result，我可以看到沒有問題的內容，而且我有 id 為“顯示”的 div 元素並且內容更新沒有問題。 但是我無法將 fr.result 存儲到全局變量中並稍后在我的代碼中使用它。 我嘗試了以下代碼：

let test = "";
document.getElementById('selectedFile').addEventListener('change', function () {
    var fr = new FileReader();
    fr.onload = function () {
        document.getElementById('display').textContent = fr.result;
        test = fr.result;
    }
    fr.readAsText(this.files[0]);
})
console.log(test);

但是控制台中的測試變量甚至在我選擇帶有輸入元素的文件之前就顯示為空並運行。 關於我在這里遺漏的任何建議，以及如何使用相同的方法將文件內容存儲在變量中？ 謝謝！

Answer 1

我試過它是這樣工作的，可能是因為你的事件監聽函數是一個匿名函數，你不能在匿名函數中調用this

<input type="file" id="selectedFile">
<p id="display"></p>
<script>
var fr = new FileReader();
let test;
document.getElementById('selectedFile').addEventListener('change', x);

    
function x() {
fr.onload = ()=>{
document.getElementById('display').innerText = fr.result;
console.log(fr.result);
test = fr.result;

}
fr.readAsText(this.files[0]);

}   


console.log(test);</script>