使用javascript讀取本地文本文件

Question

我試圖通過存儲在同一目錄中的HTML頁面textread.html中的javascript和jquery讀取test.txt。 但是我收到以下錯誤：

方法1 jQuery方法

---

jQuery錯誤：所請求的資源上不存在“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問原始“空”。

---

jQuery：

$.getJSON('test.txt', function(data) {
    console.log(data);
});

`

---

方法2 javascript方法

---

javascript錯誤：僅HTTP支持跨源請求。

---

JavaScript的：

`

if (xmlhttp != null)    {
    xmlhttp.open("GET","test.txt",false); // the false makes this synchronous!
    xmlhttp.send();
    var text = xmlhttp.responseText;
}

`

---

我也嘗試過替代代碼

我沒有托管此應用程序，因為我將使用PhoneGap作為移動應用程序進行部署。

請為我提供一種在這種情況下讀取文件的解決方案。 作為替代解決方案，建議使用HTML5 FileReader？

Answer 1

如果您使用的是HTML 5，我會發現一個非常不錯的教程：

使用HTML 5讀取文件

HTML：

<div id="page-wrapper">

   <h1>Text File Reader</h1>
   <div>
      Select a text file: 
      <input type="file" id="fileInput">
   </div>
   <pre id="fileDisplayArea"><pre>

</div>

JavaScript的：

window.onload = function() {
   var fileInput = document.getElementById('fileInput');
   var fileDisplayArea = document.getElementById('fileDisplayArea');

   fileInput.addEventListener('change', function(e) {
      var file = fileInput.files[0];
      var textType = /text.*/;

      if (file.type.match(textType)) {
         var reader = new FileReader();

         reader.onload = function(e) {
            fileDisplayArea.innerText = reader.result;
         }

         reader.readAsText(file);   
      } else {
         fileDisplayArea.innerText = "File not supported!"
      }
   });
}

Answer 2

使用JQuery，您可以嘗試使用ajax：

$.ajax({
   url : 'test.txt',
   success : function (data) {
      console.log(data);
   }
});