使用Javascript在textarea中存儲文件內容

Question

我想使用javascript在textarea標簽中顯示本地文件的內容。 這樣做，我發現以下解決方法：

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

問題是我還不是Java專業人士。 我總是得到一個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);
    });
});

聚苯乙烯

我建議從輸入元素中刪除multiple ，除非有必要，以避免不必要的復雜性。