FireFox3中input file

来源：互联网发布：师洋淘宝骂人截图编辑：程序博客网时间：2024/05/10 06:43

<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> <mce:script type="text/javascript"></mce: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脚本中调用即可。