加載 UTF-8 文本或 html 文件並將其添加到 dom 與 JavaScript

Question

我想讀取 txt 或 HTML 文件的內容（之前保存的一些 HTML 元素）並將它們添加到當前頁面。 （如在滑塊中導入模板）。 我發現這段代碼可以正常工作：

 var input = document.getElementById("myFile"); var output; document.getElementById('myFile').addEventListener("change", function() { if (this.files && this.files[0]) { var myFile = this.files[0]; var reader = new FileReader(); reader.addEventListener('load', function(e) { document.getElementById("aDivToShowResult").innerHTML = e.target.result; }); reader.readAsText(myFile); } });

 <input type="file" id="myFile"> <div id="aDivToShowResult"> </div>

但是我的內容包含 UTF-8 字符？？ （我的頁面完全有 UTF-8 字符集，但請注意，添加代碼時頁面不會重新加載，？還有以 UTF-8 保存的 txt 文件）如何通過 JS 的 UTF-8 字符集讀取文件及其內容（並添加到 DOM）？ ? 如果這是不可能的，是否有圖書館或其他代碼建議？

Answer 1

你做得很好，你只是有一個小錯誤：如果你做innerHTML ，它會期望收到一些HTML。 但是你想添加文字，對吧？ 然后你必須使用方法： element.innerText = 'your text'

這是不同的，因為后者生成一個文本節點，而第一個將嘗試解析一些 HTML 並將其作為元素節點添加到 DOM 中。

這里有一些參考：

• 內部HTML
• 內部文本

 var input = document.getElementById("myFile"); var output; document.getElementById('myFile').addEventListener("change", function() { if (this.files && this.files[0]) { var myFile = this.files[0]; var reader = new FileReader(); reader.addEventListener('load', function(e) { document.getElementById("aDivToShowResult").innerText = e.target.result; }); reader.readAsText(myFile); } });

 <input type="file" id="myFile"> <div id="aDivToShowResult"></div>