从本地运行的 JS 访问文件答案

【问题标题】：Access file from JS running localy从本地运行的 JS 访问文件
【发布时间】：2012-10-19 23:28:01
【问题描述】：

我需要从 JS 加载一个简单的 .CSV 文件（这不是问题所在），但“脚本”需要是可移植的（我将在比赛中将其用作屏幕），并将插入分数数据在 CSV 中，JS 将根据 CSV 更新它的数据。

但我的问题是：我需要在没有 apache 或服务器的情况下运行它，因为我无法让使用它的人拥有 apache 和 Internet...它需要从文件夹中打开（只是一个带有 JS 的 HTML，以及带有 .CSV 的同一文件夹中的一个文件）

当我尝试从 jQuery（$.get(..., ..., "jsonp") 和 $.get()）访问文件时，Chrome 会输出此错误：

XMLHttpRequest cannot load file:PATHTOTHEFILE Origin null is not allowed by Access-Control-Allow-Origin.

发生这种情况是因为浏览器阻止了它的内容（出于安全原因）。

我该如何“处理”这个问题，或者您知道更好的解决方案，以保存一些简单的数据并从 JS 读取它而不会出现安全问题？

谢谢

【问题讨论】：

标签： javascript jquery ajax http google-chrome

【解决方案1】：

你需要在chrome启动命令行中添加--allow-file-access-from-files

制作一个 BAT 文件，让您的用户点击它来启动您的应用

%LOCALAPPDATA%\Google\Chrome\Application\chrome.exe ^
--allow-file-access-from-files ^
http://bing.co.uk

将 http:// 换成你的文件 url。

【讨论】：

还有其他方法可以让任何“愚蠢”的人使用吗？
@Ivan 看起来没有：code.google.com/p/chromium/issues/detail?id=121406 - 这个错误与一个更大的错误合并，但仍未解决。但是，您可以创建 Chrome 的快捷方式并将标志添加到属性中的路径（比制作批处理脚本恕我直言要容易一些）。
它解决了，但它不是“完美的”......这是一种“解决方法”^^但是无论如何谢谢！ =]
BAT 脚本是“便携的”，快捷方式需要进行路径手术...对谁来说更容易？

【解决方案2】：

您可以使用 html5 FileReader。但是这样你必须选择文件。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="files">Path to file: </label><input type="file" id="files" name="files[]"/>
<script>
function handleFileSelect(evt) {
        var files = evt.target.files;
        var f;
        for (var i = 0; f = files[i]; i++) {
            if (!f.type.match('text.*')) {
                continue;
            }
            var reader = new FileReader('test.html');
            reader.onloadend = (function () {
                return function(e) {
                  alert(e.target.result);
                };
            })();
            reader.readAsText(f);
        }
    }



    var fileSerf= document.getElementById('files');
    if (fileSerf){
        fileSerf.addEventListener('change', handleFileSelect, false);
    }
</script>
</body>
</html>

示例：http://jsbin.com/ozeyag/293/

【讨论】：