加载 UTF-8 文本或 html 文件并使用 JavaScript 将其添加到 dom

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 中。

这里有一些参考：

• innerHTML
• innerText

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>