如何从本地运行的 html+javascript 页面访问和读取本地文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6396906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I access and read a local file from html+javascript page running locally
提问by gyurisc
I would like to write a small html file that would run locally and manipulate a small text file on my computer. My requirements are:
我想编写一个小的 html 文件，它可以在本地运行并在我的计算机上操作一个小文本文件。我的要求是：
- Text file sits in a directory on my computer (test.txt)
- Html file is in the same directory as the text file (test.html)
- I would like to use javascript in the html to read and write the text file.
- 文本文件位于我计算机上的一个目录中 (test.txt)
- Html 文件与文本文件 (test.html) 位于同一目录中
- 我想在 html 中使用 javascript 来读取和写入文本文件。
Is this possible at all? If yes, how do I read and write my text file using javascript?
这可能吗？如果是，我如何使用 javascript 读取和写入我的文本文件？
采纳答案by Jared Farrish
As is being discussed in Itay Moav's answer, writing to a local file with a local HTML file is perhaps going to be an issue without running in an elevated privilege mode and having additional Javascript capabilities (that allow you to save local files).
正如 Itay Moav 的回答中所讨论的那样，使用本地 HTML 文件写入本地文件可能会成为一个问题，而无需在提升的特权模式下运行并具有额外的 Javascript 功能（允许您保存本地文件）。
However, accessing a local file from an HTML file is entirely possible. Below is some example code.
但是，完全可以从 HTML 文件访问本地文件。下面是一些示例代码。
mytext.txt
文本文件
My local text file
local.html
本地.html
<html>
<head>
<base href="file:///C:/path/to/your/folder/"/>
<script>
window.onload = function(){
var iframe = document.createElement('iframe');
iframe.id = 'iframe';
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = 'mytext.txt';
setTimeout(function(){
var text = document.getElementById('iframe').contentDocument.body.firstChild.innerHTML;
alert(text);
}, 1000);
}
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
This will make an alert 1 second after the html page loads (to allow the iframe to load first), and will contain the content within the mytext.txt file.
这将在 html 页面加载后 1 秒发出警报（以允许 iframe 首先加载），并将包含 mytext.txt 文件中的内容。
Note, if it's plaintext, Firefox will wrap it with a PRE element, which is why I did firstChild. Also, note the use of the BASE element, which points to your local directory with your files.
请注意，如果它是纯文本，Firefox 会用 PRE 元素包装它，这就是我这样做的原因firstChild。另外，请注意 BASE 元素的使用，它指向包含文件的本地目录。
回答by Peter Riber
The example given by Jared works fine. However setting an unknown watiting time is not atractive. Instead attach an onload event to the iframe calling a function reading the contents of the text-file an doing whatever as soon as possible.
Jared 给出的例子工作正常。然而，设置一个未知的等待时间并不吸引人。而是将 onload 事件附加到 iframe 调用读取文本文件内容的函数，并尽快执行任何操作。
Here is a revised example:
这是一个修改后的例子：
<html>
<head>
<script>
function readfile() {
alert(document.getElementById('iframe').contentDocument.body.firstChild.innerHTML);
}
</script>
</head>
<body>
<iframe id='iframe' src = 'test.txt' onload='readfile()'> </iframe>
<h1>Hello World!</h1>
</body>
</html>
The file test.txt off course has to exist in the same directory as the above html file itself.
当然，文件 test.txt 必须与上述 html 文件本身存在于同一目录中。
回答by Itay Moav -Malimovka
Normally, it is not possible and would be a security issue.
How ever, if you use some plugins (ActiveX, FF extensions etc) they may enable you to do so.
There is also the subject of local storage you can use with the most newer browsers.
通常，这是不可能的，这将是一个安全问题。
但是，如果您使用某些插件（ActiveX、FF 扩展等），它们可能使您能够这样做。
您还可以在最新的浏览器中使用本地存储。
From your comments, I am wondering why not using PHP/Ruby any other server side language to do so? They are tailored just for that.
从您的评论中，我想知道为什么不使用 PHP/Ruby 任何其他服务器端语言来这样做？它们就是为此量身定制的。
回答by user1529413
You can also use an hta file extension and it will load in IE where you have access to ActiveX objects. In a pinch you can very quickly get an executable program up and running with minimal effort.
您还可以使用 hta 文件扩展名，它将加载到您有权访问 ActiveX 对象的 IE 中。在紧要关头，您可以以最少的努力快速启动并运行可执行程序。
The relevant code is:
相关代码是：
<!DOCTYPE html>
<html>
<head>
<HTA:APPLICATION
ID="somethingHere"
APPLICATIONNAME="YouAppsName"
WINDOWSTATE="maximize"
>
<script language="JScript">
function ReadFile(filename) {
try {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile(filename, 1);
var contents = fh.ReadAll();
fh.Close();
return contents;
} catch (Exception) {
return "Cannot open file :(";
}
function WriteFile(filename, text) {
try {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile(filename, 8, true);
fh.Write(text);
fh.Close();
} catch(Exception) {
alert("Failed to write.");
}
}
.....
</script>
etc.....
