使用JavaScript读取本地文本文件

Question

使用JavaScript读取本地文本文件

4

我想从本地HTML文件读取本地文本文件，所以我尝试遵循这个线程中的解决方案 Javascript - read local text file，但是推荐的解决方案对我也不起作用：

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

当我调用函数readTextFile("file:///D:/test/text.txt");时，firebug中没有出现错误，但也没有弹出提示框。我使用的是Windows和Firefox 51.0.1（64位）。我不想使用FileReader()函数与按钮<input type='file' onchange='openFile(event)' ...结合使用，因为文本文件需要在页面加载时自动读取。那么，如何使上述解决方案起作用呢？

阅读链接中的帖子，看起来其他人也遇到了这个问题，尽管该线程被标记为已解决。

- Markus

1

所有东西都保存在我的电脑上。阅读帖子，其他人也无法解决问题，尽管该帖子被标记为已解决。 - Markus

1

为什么不使用FileReader及其相关API呢？我以前用过，它很有效。 - Tim Consolazio

2

“阅读其他人的帖子，他们也无法解决问题，尽管该帖子被标记为已解决。” - 这并不改变其他讨论的基本结果：您不能随意读取本地文件，因为这将是一个巨大的安全问题。您需要用户交互来让他们首先选择文件。 - CBroe

3个回答

2

通常情况下，无法从JavaScript访问本地文件系统，因此您的代码示例不应该也无法工作，因为存在浏览器安全性问题。

然而，有一个名为“File”和“FileReader”的API可以允许您从中读取文件的内容，并且实际上是这种情况下的唯一选择 - 您可以使用“FileReader.readAsText()”来访问文件的内容。这是进一步了解的好资源：

https://www.html5rocks.com/en/tutorials/file/dndfiles/

- edcs

好的，谢谢你的解释。所以我不明白为什么那个链接线程的创作者会写“在浏览器上让它工作起来了[..]”。因此使用函数FileReader()并定义变量事件以及使用 <body onload='openFile(event)'> 也行不通吗？ - Markus

1

请注意，如果你的浏览器版本低于IE11，则无法使用FileReader功能。如需查看详情，请访问http://caniuse.com/#search=FileReader（需要SHIM）。 - Ben Temple-Heald

@Markus - 这是一个老问题，这种做法可能在过去有效，但由于引入的安全问题已被弃用。您不希望网站能够从您的计算机“窃取”文件！ - edcs

1

最简单的解决方法是将文本文件更改为 .js 文件，保存在同一个文件夹中，并通过 <script src="test.js"></script> 在 html 文件中引用它。

- Markus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Balazs Vago · Accepted Answer

以下是一个HTML和JavaScript示例，用于读取客户端数据文件。客户端文件只能由FileReader访问，需要指定用户选择的文件。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
                function loadFile(o)
                {
                    var fr = new FileReader();
                    fr.onload = function(e)
                        {
                            showDataFile(e, o);
                        };
                    fr.readAsText(o.files[0]);
                }

                function showDataFile(e, o)
                {
                    document.getElementById("data").innerText = e.target.result;
                }
            </script>

        </script>
    </head>
    <body>
        Select file to read <input type="file" onchange="loadFile(this)">
        <pre id="data"></pre>
    </body>
</html>