使用 JavaScript 将本地 .txt 文件中的文本加载到 html textarea

Question

我有一个 <textarea> 元素和一个调用 loadFile() JavaScript 函数的按钮。我希望此功能允许我将本地计算机上的 .txt 文件中的文本加载到文本区域中。如有任何帮助，我们将不胜感激！

Answer 1

我发现了一个关于这个的老话题： How do I load the contents of a text file into a javascript variable?

你读完最后一个答案了吗？这适用于 div 而不是文本框，但您可以稍微调整一下代码。

在最后评论者的最后一段post你可以改变这一行：

document.getElementById("id01").innerHTML = out;

至：

document.getElementById("textbox01").innerHTML = out;

在你的 HTML 中：

<textarea name="textbox01">Enter text here...</textarea>

结果：

function loadFile() {
    var xmlhttp = new XMLHttpRequest();
    var url = "file.txt";

    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myArr = JSON.parse(xmlhttp.responseText);
            myFunction(myArr);

            console.log("xmlhttp Request Asepted");
        }


    }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();


        function myFunction(arr) {
            var out = "";
            var i;
            var row = 0;

        for(i = 0; i < arr.length; i++) {
           // console.log( arr[1].data); change data to what every you have in  your file
           // out +=  arr[i].data + '<br>' + arr[i].data2 ;
            document.getElementById("textbox01").innerHTML = out;

        }

    }
}

Answer 2

您可以使用 File 和 FileReader 对象来读取本地文件。

您可以使用类型为"file"的输入元素来允许用户select一个文件。

<input id="myFile" type="file"/>
<textarea id="myTextArea" rows="4" columns="20"></textArea>

用户select编辑文件后，您可以从输入元素中获取文件对象。例如...

var file = document.getElementById("myFile").files[0];

然后您可以使用 FileReader 对象将文件读入文本区域。例如...

var reader = new FileReader();
reader.onload = function (e) {
    var textArea = document.getElementById("myTextArea");
    textArea.value = e.target.result;
};
reader.readAsText(file);

使用 JavaScript 将本地 .txt 文件中的文本加载到 html textarea

Load text from local .txt file into html textarea using JavaScript

html

javascript

textarea