更新：大部分浏览器的最新版本都支持通过 FileReader 来打开本地文件，具体方法见这里。
为着安全起见，在 JavaScript 中是不允许直接访问本地文件的。但有时候又需要打开和保存本地文件，在目前的情况之下就只能用一些特殊的方法来实现了。最麻烦的是，这些方法大多都不能适 用于各个主要浏览器，很费事但也只能如此。这一篇总结一下各种打开本地文件的方法，下一篇总结保存本地文件的方法。
首先是 IE 浏览器。IE 有自己独有的 ActiveX，实现文件的是容易的。在下面的例子中，首先选择好要打开的文件路径名，点击"Read"按钮后将把该文件的内容读入 textarea 区域：
<html>
<body>
<input type="file" id="fileid">
<button onclick="doRead()">Read</button>
<textarea id="areaid">hello this!</textarea>
<script type="text/javascript">
// works in ie 6
var myfile = document.getElementById("fileid");
var myarea = document.getElementById("areaid");
/* myfile.click(); */
function doRead() {
var filename = myfile.value;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var tempfile = fso.OpenTextFile(filename, 1);
var data = tempfile.ReadAll();
myarea.value = data;
tempfile.Close();
}
</script>
</body>
</html>
注意其中IE将弹出警告窗口要求你确认。
接下来我们来看在 Firefox 中有什么方法可以实现文件的读取。Firefox 自己扩展了文件选择按钮的功能，因此用下面的代码可以实现本地文件的打开：
<html>
<body>
<input type="file" id="fileid">
<button onclick="doRead()">Read</button>
<textarea id="areaid">hello this!</textarea>
<script type="text/javascript">
// works in firefox 3
var myfile = document.getElementById("fileid");
var myarea = document.getElementById("areaid");
/* myfile.click(); // works in firefox 4 and beyond */
function doRead() {
var tempfile = myfile.files[0];
var data = tempfile.getAsText("utf8");
myarea.value = data;
}
</script>
</body>
</html>
看起来比IE情形要简单一些，不过上面这些函数在 Firefox 中已经标记为废弃的，在以后可能会被去掉。如果只是在本地网页中读取本地文件，在 Firefox 中还可以用[5]中的方法。
参考资料：
[1] MSDN - OpenTextFile Method
[2] File - MDC Docs
[3] FileReader - MDC Docs
[4] Using files from web applications - MDC Docs
[5] File I/O - MDC Docs
[6] HTML5中File对象初探 | JS Mix
[YAML] Date: 2011-05-26 18:00:52, Update: 2012-05-27 12:30:00
