- 浏览: 400641 次
- 性别:
- 来自: 天津
文章分类
最新评论
-
junchao_qin:
[img][flash=200,200][url][img]引 ...
MyEclipse中使用VSS插件 -
tigerwood008:
IE11不好用!!
js弹出窗口 + 获取上传文件全路径 -
TheMatrix:
$.ajaxSetup({async : false});这种 ...
jquery 中的post和get方法如何同步 -
多多成长记:
Blazeds与java通信 -
ZED.CWT:
[align=ceiinter][/align]
java中利用JFrame创建窗体 【转】
转自:http://chenhua-1984.iteye.com/blog/405262
firefox3不能获得html file的全路径的问题
遇到这个问题以后,在往上 找了以下,发现这个大哥的博客写的很详细,于是就转载下来,以供参考!原文网址是:http://www.cnblogs.com/jaxu/archive/2009/04/19/1439016.html 下面是转载的正文:
相信很多人都使用过<input type="file"/>这样的HTML控件,它看起来非常普通,是我们在做Web应用程序中用于上传客户端本地文件时不可缺少的控件,然而最近 我发现这个控件在最新的FireFox浏览器(或者最新的IE8中也会存在这个问题,我没有尝试过,读者可以试一下)中却失去了效果,导致我们在通过这个 控件的value属性得到的值中只包含了文件名而没有文件路径,这个在IE7中是可以正常获取到全文件名的(即文件完整路径+文件名)。IE7和大部分当 前流行的浏览器(如FireFox2版本)都可以获取到文件的路径,但是FireFox3却不行,我查了很多资料,发现这是FireFox3为了弥补在低 版本中可能会引起安全问题的一个漏洞,据说黑客会通过FireFox的这一安全隐患向服务器上传文件!其实我也搞不懂,不就是本地文件的路径么?怎么会影 响到服务器的安全问题呢?看来高手们还真的很强!!
来说说我为什么要得到本地所选的文件的路径。大家都知道163邮箱,里面在上传邮件附件的时候是允许选择多附件的,我要做的功能类似于这个,不过我在这里 并不是要研究163是如何实现这个功能,我只想在用户选择文件的时候动态在一个Div中添加他所选择的文件的信息和一个删除按钮,然后将这个文件的信息保 存在页面的一个隐藏域中,当用户保存页面时服务器端代码根据页面隐藏域中的信息将用户所选的文件上传到服务器上。当然,页面隐藏域中的信息至少要包含用户 本地所选文件的路径,否则就不知道在什么地方去找文件了。有关如何实现动态添加HTML节点不是本文的重点,这里我也不贴代码了,下面说说我所遇到的问 题。
下面是一段用于测试问题的代码。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
- < 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.getElementById('File1').value);" />
- </ body >
- </ html >
运行后在IE7中的结果:
运行后在FireFox3中的结果:.
那么我如何才能在FireFox3中取得本地文件的路径呢?就像上面我在IE7中得到的那个值一样!暂且撇开这个问题,先说说在FireFox3中如何上 传一个文件吧。既然FireFox3中将获取本地文件的路径的方法当做一个安全隐患被禁止了,那么它一定有相关的方法来解决这个问题,否则 FireFox3就不能实现在客户端上传文件的功能了,就像前两天我的一个同事说的一样,要真是这样,FireFox就废了!其实FireFox3中引入 了一个新的接口用来解决这个问题,那就是nsIDOMFile,它专门被用来从客户端的input type="file"的控件中获取文件数据,这样就可以将本地的文件保存到服务器上。这是一个非常好的解决办法,以至于我们在FireFox3中开发这 样的应用程序时比先前简单获取value值然后再通过服务器端代码上传文件要简单许多,不过令人担忧的是,这个接口只适用于FireFox,在IE和其它 的浏览器中并不支持。一会儿再说如何解决浏览器的兼容性问题,先看一下在FireFox3中怎么使用nsIDOMFile。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "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.getElementById('my-file').files) {
- // Support: nsIDOMFile, nsIDOMFileList
- alert('value: ' + document.getElementById('my-file').value);
- alert('files.length: ' + document.getElementById('my-file').files.length);
- alert('fileName: ' + document.getElementById('my-file').files.item(0).fileName);
- alert('fileSize: ' + document.getElementById('my-file').files.item(0).fileSize);
- alert('dataurl: ' + document.getElementById('my-file').files.item(0).getAsDataURL());
- alert('data: ' + document.getElementById('my-file').files.item(0).getAsBinary());
- alert('datatext: ' + document.getElementById('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.getElementById('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脚本中调用即可。当得知这一点时,我差点高兴得一晚上没有睡觉。
好了,现在来看我是怎么做的了!
- <html>
- <head>
- <title>Untitled Page</title>
- <script type="text/javascript" >
- function readFile(fileBrowser) {
- if (navigator.userAgent.indexOf( "MSIE" )!=-1)
- readFileIE(fileBrowser);
- else if (navigator.userAgent.indexOf( "Firefox" )!=-1 || navigator.userAgent.indexOf( "Mozilla" )!=-1)
- readFileFirefox(fileBrowser);
- else
- alert("Not IE or Firefox (userAgent=" + navigator.userAgent + ")" );
- }
- function readFileFirefox(fileBrowser) {
- try {
- netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect" );
- }
- catch (e) {
- alert('Unable to access local files due to browser security settings. To overcome this, follow these steps: (1) Enter "about:config" in the URL field; (2) Right click and select New->Boolean; (3) Enter "signed.applets.codebase_principal_support" (without the quotes) as a new preference name; (4) Click OK and try loading the file again.' );
- return ;
- }
- var fileName=fileBrowser.value;
- var file = Components.classes[ "@mozilla.org/file/local;1" ]
- .createInstance(Components.interfaces.nsILocalFile);
- try {
- // Back slashes for windows
- file.initWithPath( fileName.replace(/\//g, "\\\\") );
- }
- catch (e) {
- if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
- alert("File '" + fileName + "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file." );
- return ;
- }
- if ( file.exists() == false ) {
- alert("File '" + fileName + "' not found." );
- return ;
- }
- alert(file.path); // I test to get the local file's path.
- var is = Components.classes[ "@mozilla.org/network/file-input-stream;1" ].createInstance( Components.interfaces.nsIFileInputStream );
- try { is.init( file,0x01, 00004, null ); }
- catch (e) {
- if (e.result!=Components.results.NS_ERROR_FILE_ACCESS_DENIED) throw e;
- alert("Unable to access local file '" + fileName + "' because of file permissions. Make sure the file and/or parent directories are readable." );
- return ;
- }
- var sis = Components.classes[ "@mozilla.org/scriptableinputstream;1" ].createInstance( Components.interfaces.nsIScriptableInputStream );
- sis.init( is );
- var data = sis.read( sis.available() );
- alert("Data from file: " + data); // I test to get the local file's data.
- }
- function readFileIE(fileBrowser) {
- var data;
- try {
- var fso = new ActiveXObject( "Scripting.FileSystemObject" );
- var fileName=fso.GetAbsolutePathName(fileBrowser.value);
- if (!fso.FileExists(fileName)) {
- alert("File '" + fileName + "' not found." );
- return ;
- }
- var file = fso.OpenTextFile(fileName, 1);
- data = file.ReadAll();
- alert("Data from file: " + data);
- file.Close();
- }
- catch (e) {
- if (e.number == -2146827859) {
- // This is what we get if the browser's security settings forbid
- // the use of the FileSystemObject ActiveX control
- alert('Unable to access local files due to browser security settings. To overcome this, go to Tools->Internet Options->Security->Custom Level. Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"' );
- }
- else if (e.number == -2146828218) {
- // This is what we get if the browser can't access the file
- // because of file permissions
- alert("Unable to access local file '" + fileName + "' because of file permissions. Make sure the file and/or parent directories are readable." );
- }
- else throw e;
- }
- }
- </script>
- </head>
- <body>
- <form name="form1" >
- Browse to select a file
- <input type="file" name= "fileBrowser" size= "125" onchange= "readFile(this)" />
- </form>
- </body>
- </html>
首先我们需要判断用户浏览器的类型来选择执行不同的function,IE中直接调用Scripting.FileSystemObject这个
ActiveXObject,不过如果用户的IE没有打开“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”的话是不能执行这行代码的,
在脚本中给出了提示,告诉用户必须将这个选项打开。
IE的问题不大,因为我们完全可以直接使用input的value值得到文件的路径,这里给出的方法主要是可以得到文件的二进制数据,重点看看在
FireFox3中是如何做的。FireFox3中需要用户在配置页面中添加一个名称为
signed.applets.codebase_principal_support的键值,将值设为true,然后就可以通过代码中给出的方法得到文
件的本地路径了,同样也可以得到文件的二进制数据。
这样,我的问题就可以解决了,不管是在IE中,还是在FireFox中,我都可以获取到用户所选文件的本地路径,然后保存在页面的隐藏域中,当用户提交页面时,服务器端代码便可以通过页面隐藏域中的值得到用户所选择的文件的路径,从而上传文件到服务器。
发表评论
-
jquery插件
2012-05-04 16:42 15741. Datatables——jquery表格插件,可对表格进 ... -
js弹出窗口 + 获取上传文件全路径
2012-05-04 16:13 168631. 自动弹出窗口 <!DOCTYPE html> ... -
【转】js实现弹出选择路径框
2012-05-04 15:59 5684js实现弹出选择路径框,转载 转自:http://blo ... -
kindeditor文本编辑插件
2011-12-22 15:16 3011KindEditor是一套开源的HTML可视化编辑器,兼 ... -
jquery DataTables插件显示表格
2011-01-14 18:03 9704jquery DataTables插件显示表格 该插件可 ... -
jquery 中的post和get方法如何同步
2011-01-14 12:10 61795jquery 中post 、get的同步问题 解决方法1 ... -
ie下servlet缓存问题
2010-12-16 15:03 1570IE下servlet缓存问题 如下图所示: 在html页面 ... -
SyntaxHighlighter代码高亮显示插件
2010-12-12 22:09 2280SyntaxHighlighter代码高亮显示 ... -
jqplot插件绘图
2010-10-21 23:20 3086官网主页:http://www.jqplot.com/ ... -
日期控件
2010-10-19 20:09 13651. struts2 自带控件 (1)导入struts ...
相关推荐
关于如何从firefox中获取file控件里的实际路径的解决代码
具体代码如下: 代码如下: <html> <head> <title>get file input full path</title> [removed] function getFullPath(obj) { if(obj) { //ie... } //firefox else if(window.navigator.userAge
这里我们按浏览器分,主要包括IE6,IE7/8 和Firefox3, 不包含Opera,Safari和Chrome,这三个基本上需求很小,没有研究。 总结一下就是: IE6下可以直接从file的value获取图片路径来显示预览。 IE7和IE8下通过select...
2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 ...
- 非root解压问题 不能解压 - list oexe 图标问题 - 用户目录不存在判断 - fileCahe 互斥锁 reset 不用 - ie 8~10样式问题调整 ###ver2.6 `2014/7/6` ---- ####update: - 完全性优化;加入严格的校验机制 - ...
我每隔约15分钟从crontab中运行一次,以使我的主页使用firefox和chrome作为我的组织议程的最新版本。配置在config.el修改org-agenda-files以包含要包含在议程中的org文件的路径。 为HTML输出设置所需的位置agenda-...
在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 ...
Firefox问题 出于安全原因,Firefox不久前取消了配置“新选项卡”页面的功能,因此我们需要一种解决方法。 在Firefox安装的基本目录中,创建以下两个文件,分别包含相应的内容: autoconfig.cfg 路径设置为HTML...
2.网络工具,包括:文件共享、网络驱动器映射和TCP/IP设置,同时ERD Commander 2005较2003不同的一个地方是集成了Mozilla Firefox网页浏览器,网络功能更加完善。 3.系统工具,包括9个组件: Crash Analyer,主要是...
3、一般用户不能访问内容 49 4、页面导航不能分页 49 5、一些portal常见问题 49 6、Portal中调用PUMA SPI管理用户和组信息 51 7、WCM内存溢出的解决方法 53 七、组件及其标签 53 (一)、标签 53 1、jsp组件 53 2、...
由于jQuery加载的是本地JSON数据,部分浏览器无法正常显示HTML的内容,目前已知使用FireFox可直接打开 使用chrome打开HTML时,需从cmd进入chrome安装目录,然后输入“chrome.exe --allow-file-access-from-files”...
2.网络工具,包括:文件共享、网络驱动器映射和TCP/IP设置,同时ERD Commander 2005较2003不同的一个地方是集成了Mozilla Firefox网页浏览器,网络功能更加完善。 3.系统工具,包括9个组件: Crash Analyer,主要是...
2.网络工具,包括:文件共享、网络驱动器映射和TCP/IP设置,同时ERD Commander 2005较2003不同的一个地方是集成了Mozilla Firefox网页浏览器,网络功能更加完善。 3.系统工具,包括9个组件: Crash Analyer,主要是...
取证工具取证分析工具的集合。 仍在进行中...免责声明仅用于教育用途。 作者不对恶意使用负责!依存关系: lxml: : olefile: ://pypi.python.org/pypi/olefile/0.44 PyPDF2... firefox_scanner:用于解析Firefox配
就像以前在Firefox中可用的browser.newtab.url一样。 大小:5 kB使用此扩展名,您可以更改打开新标签页时显示的页面。 将您喜欢的网站设置为开始标签页。 另外,您可以从本地磁盘构建和设置自己的起始页。 只需创建...
2.全面支持,IE7,IE8,FireFox3.0,FireFox3.5,Opera8,Opera9,Safari等浏览器。 3.新增控件直接保存文件功能。 4.新增控件直接读取文本、网页文件功能。 5.新增控件直接读取WEB网页功能。 6.新增控制用户上传文件类型...
就像以前在Firefox中可用的browser.newtab.url一样。 大小:5 kB使用此扩展名,您可以更改打开新标签页时显示的页面。 将您喜欢的网站设置为开始标签页。 另外,您可以从本地磁盘构建和设置自己的起始页。 只需创建...
•%HOST%-页面或资源URL中的主机名•%PATH%-页面或资源URL中的路径,不带最终文件扩展名•%FILE%-路径最后一段中的文件(不带最终文件)扩展名有一些选项可以用用户定义的字符替换保存的文件名中的空格,并...
一组用于执行各种任务的Python脚本: (文件/文本操作,HTTP请求,文件下载,HTML解析器) modules / file_system_functions-获取文件名,路径,... addons_download-通过直接URL的Firefox插件下载器addons_parse-从