javascript - 需要通过 JavaScript 访问本地文本文件

Question

我正在从事一个项目，该项目必须是独立的并且能够在没有互联网连接的情况下运行。它用于视频演示，我需要导入一个 .txt 文件，其中包含章节和循环信息，例如章节标题、循环点和章节结束点(均在帧中)。但是，没有用于包含文本文件的客户端包含脚本。

存储或访问本地文本文件以便我可以对其进行迭代并构建我的章节对象的最佳方式是什么？ HTML5 本地存储？通过包含一个隐藏的 iframe 来加载文本文件然后通过 JavaScript 获取正文内容来进行黑客攻击？对此问题的任何帮助将不胜感激。

谢谢!

Answer 1

您的问题“需要通过 JavaScript 访问本地文本文件”与这里的问题非常相似:Local file access with javascript

答案是，如果您在浏览器中使用 javascript，确实没有访问本地文件的好方法。如果它只是同一台机器上没有 http/web 服务器的文本文件，你可能会遇到一些问题，因为在 javascript 中，大多数浏览器默认禁用读取本地文件的能力。在 chrome 中，您可以通过在从命令行启动浏览器时添加以下标志来禁用此安全功能。

--禁用网络安全

如果您的数据是结构化的json , xml , csv , 你可以用 AJAX call 把它带进来如果文件托管在可通过 HTTP 访问的服务器上。不使用 http ajax 调用，上面问题链接中提到的另一种可能的解决方案:

Just an update of the HTML5 features http://www.html5rocks.com/en/tutorials/file/dndfiles/ This excellent article will explain en detail the local file access in Javascript. Summary from the mentioned article:

The spec provides several interfaces for accessing files from a 'local' filesystem:

File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle. FileList - an array-like sequence of File objects. (Think or dragging a directory of files from the desktop). Blob - Allows for slicing a file into byte ranges. -- @Horst Walter

如下所示，您可以有一个“文件上传”输入选择，只需将您的文件路径作为输入的默认选项即可”

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>