相信很多人都使用过<input type="file"/>这样的HTML控件，它看起来非常普通，是我们在做Web应用程序中用于上传客户端本地文件时不可缺少的控件，然而最近 我发现这个控件在最新的FireFox浏览器（或者最新的IE8中也会存在这个问题，我没有尝试过，读者可以试一下）中却失去了效果，导致我们在通过这个 控件的value属性得到的值中只包含了文件名而没有文件路径，这个在IE7中是可以正常获取到全文件名的（即文件完整路径+文件名）。IE7和大部分当 前流行的浏览器（如FireFox2版本）都可以获取到文件的路径，但是FireFox3却不行，我查了很多资料，发现这是FireFox3为了弥补在低 版本中可能会引起安全问题的一个漏洞，据说黑客会通过FireFox的这一安全隐患向服务器上传文件！其实我也搞不懂，不就是本地文件的路径么？怎么会影响到服务器的安全问题呢？看来高手们还真的很强！！
来说说我为什么要得到本地所选的文件的路径。大家都知道163邮箱，里面在上传邮件附件的时候是允许选择多附件的，我要做的功能类似于这个，不过我在这里 并不是要研究163是如何实现这个功能，我只想在用户选择文件的时候动态在一个Div中添加他所选择的文件的信息和一个删除按钮，然后将这个文件的信息保 存在页面的一个隐藏域中，当用户保存页面时服务器端代码根据页面隐藏域中的信息将用户所选的文件上传到服务器上。当然，页面隐藏域中的信息至少要包含用户 本地所选文件的路径，否则就不知道在什么地方去找文件了。有关如何实现动态添加HTML节点不是本文的重点，这里我也不贴代码了，下面说说我所遇到的问 题。
下面是一段用于测试问题的代码。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<input id="File1" type="file" /><input id="btAdd" type="button" value="Add" onclick="alert(document.getElementByIdx('File1').value);" />
</body>
</html>
运行后在IE7中的结果：
运行后在FireFox3中的结果：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type=file & Firefox 3</title>
</head>
<body>
<h1>input type=file & Firefox 3</h1>
<script type="text/javascript">
// <![CDATA[
function inputFileOnChange() {
if(document.getElementByIdx('my-file').files) {
// Support: nsIDOMFile, nsIDOMFileList
alert('value: ' + document.getElementByIdx('my-file').value);
alert('files.length: ' + document.getElementByIdx('my-file').files.length);
alert('fileName: ' + document.getElementByIdx('my-file').files.item(0).fileName);
alert('fileSize: ' + document.getElementByIdx('my-file').files.item(0).fileSize);
alert('dataurl: ' + document.getElementByIdx('my-file').files.item(0).getAsDataURL());
alert('data: ' + document.getElementByIdx('my-file').files.item(0).getAsBinary());
alert('datatext: ' + document.getElementByIdx('my-file').files.item(0).getAsText("utf-8"));
};
};
// ]]>
</script>
<div>
<input type="file" name="my-file" id="my-file" onchange="inputFileOnChange();" />
</div>
</body>
</html>
document.getElementByIdx('my-file').files方法用于获取到用户所选择的文件的集合，一般情况下都是选择单一文 件（貌似FireFox这样做是支持多文件选择的，不过没有试过，读者可以自己去尝试），item数组可以得到其中的某一个文件，然后我们就可以使用 nsIDOMFile所提供的属性和方法了。它包括2个属性和3个方法：
fileName：用于获取到用户所选文件的名称，这和直接取value值所得到的结果一样。
fileSize：得到用户所选文件的大小。
getAsBinary()：得到用户所选文件的二进制数据。
getAsDataURL()：得到用户所选文件的路径，该路径被加密了，目前只能在FireFox中使用。
getAsText()：得到用户所选文件的指定字符编码的文本。
读者可以参考这个地址：https://developer.mozilla.org/en/nsIDOMFile
有一点需要说明，方法getAsDataURL()可以取得用户所选文件的本地路径，但是这个路径的字符串文本被FireFox加密了，并且这段密文只能 被FireFox识别，其它的浏览器不能识别，也就是说我将被加密后的路径直接赋值给一个img标签的src属性，在FireFox中是可以直接显示出图 片的，而在IE中却不行。从这一点来看，FireFox是不是有点王者风范呢？居然连大名鼎鼎的IE都不支持！
再回到本文一开始所提的那个问题上来。即然我不能在FireFox中得到用户所选文件的本地路径，而且采用getAsDataURL()方法得到的这个路 径也不能体现通用性，那怎么才能彻底解决这个问题呢？简单思考一下，浏览器为什么能够调用OS的文件打开对话框，从而进一步得到用户所选的文件的信息呢？ 浏览器不是仅仅只能解释HTML文本么？没错，这个是浏览器的基本功能，至于如果调用OS提供的功能接口，那是浏览器的各个不同厂商自己要做的工作，这个 似乎没有一个统一的标准，也不会被列入到W3C的规范中，FireFox3就是一个特例。这样看来，我们只有自己编写代码来调用OS的文件打开对话框了， 这看起来是一件非常辛苦的事情，最好的办法莫过于编写ActiveX控件嵌入到浏览器中来执行，幸运的是IE和FireFox都提供了现成的方法供我们调 用，我们只需要在js脚本中调用即可。