javascript - 使用javascript读取本地文本文件

Question

我试图通过javascript和jquery读取存储在同一目录中的HTML页面textread.html中的test.txt。但我收到以下错误:

方法1 jQuery方法

<小时/>

jQuery 错误: 请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问源“null”。

<小时/>

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，我发现了一个非常好的教程:

Reading Files using 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!"
      }
   });
}