使用 JavaScript 将本地 .txt 文件中的文本加载到 html textarea 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33640325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load text from local .txt file into html textarea using JavaScript
提问by Jed
I have a <textarea>element and a button that calls a loadFile()JavaScript function. I want this function to allow me to load the text from a .txt file on my local machine into the textarea. Any help with this would be greatly appreciated!
我有一个<textarea>元素和一个调用loadFile()JavaScript 函数的按钮。我希望此功能允许我将本地计算机上的 .txt 文件中的文本加载到 textarea 中。对此的任何帮助将不胜感激！
回答by Bobby Orndorff
You can use the File and FileReader objects to read local files.
您可以使用 File 和 FileReader 对象来读取本地文件。
You can use an input element with type="file" to allow the user to select a file.
您可以使用 type="file" 的输入元素来允许用户选择文件。
<input id="myFile" type="file"/>
<textarea id="myTextArea" rows="4" columns="20"></textArea>
After the user has selected a file, you can get the File object from the input element. For example...
用户选择文件后，可以从 input 元素中获取 File 对象。例如...
var file = document.getElementById("myFile").files[0];
You can then use a FileReader object to read the file into the text area. For example...
然后，您可以使用 FileReader 对象将文件读入文本区域。例如...
var reader = new FileReader();
reader.onload = function (e) {
var textArea = document.getElementById("myTextArea");
textArea.value = e.target.result;
};
reader.readAsText(file);
回答by iSidle
I found a old topic about this: How do I load the contents of a text file into a javascript variable?
我发现了一个关于此的旧主题： 如何将文本文件的内容加载到 javascript 变量中？
Have you read the last answer already? This works with a div instead of a textbox, but you could adapt the code a bit.
你已经读过最后一个答案了吗？这适用于 div 而不是文本框，但您可以稍微调整一下代码。
In the last piece of the last commenters post you could change this line:
在最后评论者帖子的最后一部分中，您可以更改这一行：
document.getElementById("id01").innerHTML = out;
to:
到：
document.getElementById("textbox01").innerHTML = out;
And in your HTML:
在你的 HTML 中：
<textarea name="textbox01">Enter text here...</textarea>
Result:
结果：
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;
}
}
}
