Question

我想使用javascript在textarea-tag中显示本地文件的内容。为此，我找到了以下解决方法：

<textarea id="queryContent"></textarea>
    <input type="file" multiple id="queryInput">
    <script>
        var input = document.getElementById("queryInput");
        input.addEventListener("change", function () {
            Array.prototype.forEach.call(input.files, function (file) {
                var reader = new FileReader();
                reader.addEventListener("load", function () {
                    console.log("File", file.name, "starts with",
                        reader.result.slice(0,20));
                });
                reader.readAsText(file);
                document.getElementById("queryContent").innerText = reader.result.toString();
            });
        });
    </script>

问题是我还不是Javascript的专家。我总是得到一个reader.result是null错误，我不知道为什么。感谢您的帮助！

Answer 1

这一行：

document.getElementById("queryContent").innerText = reader.result.toString();

应该在回调中发生。当脚本运行此行时，FileReader尚未完成其工作，因此reader.result很可能是null。

请尝试以下代码：

var input = document.getElementById("queryInput");
input.addEventListener("change", function () {
    Array.prototype.forEach.call(input.files, function (file) {
        var reader = new FileReader();
        reader.addEventListener("load", function () {
            console.log("File", file.name, "starts with", reader.result.slice(0,20));
            document.getElementById("queryContent").innerText = reader.result.toString();
        });
        reader.readAsText(file);
    });
});

<强> P.S。

我建议从输入元素中删除multiple，除非是必需的，以避免不必要的复杂性。

使用Javascript在textarea中文件内容

1 个答案: