[英]Load text from local .txt file into html textarea using JavaScript
我有一個<textarea>
元素和一個調用loadFile()
JavaScript函數的按鈕。 我希望這個函數允許我將本地機器上的.txt文件中的文本加載到textarea中。 任何有關這方面的幫助將不勝感激!
您可以使用File和FileReader對象來讀取本地文件。
您可以使用type =“file”的input元素來允許用戶選擇文件。
<input id="myFile" type="file"/>
<textarea id="myTextArea" rows="4" columns="20"></textArea>
用戶選擇文件后,您可以從input元素中獲取File對象。 例如...
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變量中?
你已經閱讀了最后一個答案嗎? 這適用於div而不是文本框,但您可以稍微調整代碼。
在最后一篇評論者的帖子中你可以改變這一行:
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;
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.