使用JavaScript將本地.txt文件中的文本加載到html textarea中

Question

我有一個<textarea>元素和一個調用loadFile() JavaScript函數的按鈕。我希望這個函數允許我從本地機器上的.txt文件中加載文本到textarea中。任何幫助，將不勝感激！

Answer 1

您可以使用File和FileReader對象來讀取本地文件。

您可以使用type =「file」的輸入元素來允許用戶選擇文件。

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

用戶選擇文件後，可以從輸入元素獲取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); 

Answer 2

我發現這個一個老話題： How do I load the contents of a text file into a javascript variable?

有您已經閱讀最後的答案嗎？這適用於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; 

     } 

    } 
}