`

【转】firefox3不能获得html file的全路径的问题

    博客分类：
  • UI
 
阅读更多

转自：http://chenhua-1984.iteye.com/blog/405262

firefox3不能获得html file的全路径的问题

HTML Firefox IE 浏览器 应用服务器

 遇到这个问题以后，在往上 找了以下，发现这个大哥的博客写的很详细，于是就转载下来，以供参考！原文网址是：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节点不是本文的重点，这里我也不贴代码了，下面说说我所遇到的问 题。

    下面是一段用于测试问题的代码。

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml"   >   
  3. < head >   
  4.     < title > Untitled Page </ title >   
  5. </ head >   
  6. < body >   
  7.     < input   id = "File1"   type = "file"   /> < input   id = "btAdd"   type = "button"   value = "Add"   onclick = "alert(document.getElementById('File1').value);"   />   
  8. </ body >   
  9. </ html >   

 运行后在IE7中的结果：



 运行后在FireFox3中的结果：.


那么我如何才能在FireFox3中取得本地文件的路径呢？就像上面我在IE7中得到的那个值一样！暂且撇开这个问题，先说说在FireFox3中如何上 传一个文件吧。既然FireFox3中将获取本地文件的路径的方法当做一个安全隐患被禁止了，那么它一定有相关的方法来解决这个问题，否则 FireFox3就不能实现在客户端上传文件的功能了，就像前两天我的一个同事说的一样，要真是这样，FireFox就废了！其实FireFox3中引入 了一个新的接口用来解决这个问题，那就是nsIDOMFile，它专门被用来从客户端的input type="file"的控件中获取文件数据，这样就可以将本地的文件保存到服务器上。这是一个非常好的解决办法，以至于我们在FireFox3中开发这 样的应用程序时比先前简单获取value值然后再通过服务器端代码上传文件要简单许多，不过令人担忧的是，这个接口只适用于FireFox，在IE和其它 的浏览器中并不支持。一会儿再说如何解决浏览器的兼容性问题，先看一下在FireFox3中怎么使用nsIDOMFile。

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
  3.   
  4. < html   xmlns = "http://www.w3.org/1999/xhtml"   xml:lang = "en"   lang = "en" >   
  5. < head >   
  6.     < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />   
  7.     < title > input  type = file  & Firefox 3 </ title >   
  8. </ head >   
  9.   
  10. < body >   
  11.       
  12. < h1 > input  type = file  & Firefox 3 </ h1 >   
  13.       
  14. < script   type = "text/javascript" >   
  15. // <![CDATA[  
  16.  
  17. function inputFileOnChange() {      
  18.     if(document.getElementById('my-file').files) {  
  19.         // Support: nsIDOMFile, nsIDOMFileList  
  20.         alert('value: ' + document.getElementById('my-file').value);  
  21.         alert('files.length: ' + document.getElementById('my-file').files.length);  
  22.         alert('fileName: ' + document.getElementById('my-file').files.item(0).fileName);  
  23.         alert('fileSize: ' + document.getElementById('my-file').files.item(0).fileSize);  
  24.         alert('dataurl: ' + document.getElementById('my-file').files.item(0).getAsDataURL());  
  25.         alert('data: ' + document.getElementById('my-file').files.item(0).getAsBinary());  
  26.         alert('datatext: ' + document.getElementById('my-file').files.item(0).getAsText("utf-8"));  
  27.     };  
  28. };  
  29.  
  30. // ]]>   
  31. </ script >   
  32.       
  33. < div >   
  34.     < input   type = "file"   name = "my-file"   id = "my-file"   onchange = "inputFileOnChange();"   />   
  35. </ div >   
  36.       
  37. </ body >   
  38. </ 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脚本中调用即可。当得知这一点时，我差点高兴得一晚上没有睡觉。

    好了，现在来看我是怎么做的了！

 

Js代码  收藏代码
  1. <html>  
  2. <head>  
  3.     <title>Untitled Page</title>  
  4.   
  5.     <script type="text/javascript" >  
  6. function  readFile(fileBrowser) {  
  7.     if  (navigator.userAgent.indexOf( "MSIE" )!=-1)  
  8.         readFileIE(fileBrowser);  
  9.     else   if  (navigator.userAgent.indexOf( "Firefox" )!=-1 || navigator.userAgent.indexOf( "Mozilla" )!=-1)  
  10.         readFileFirefox(fileBrowser);  
  11.     else   
  12.         alert("Not IE or Firefox (userAgent="  + navigator.userAgent +  ")" );  
  13. }  
  14.   
  15. function  readFileFirefox(fileBrowser) {  
  16.     try  {  
  17.         netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect" );  
  18.     }   
  19.     catch  (e) {  
  20.         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.' );  
  21.         return ;  
  22.     }  
  23.   
  24.     var  fileName=fileBrowser.value;  
  25.     var  file = Components.classes[ "@mozilla.org/file/local;1" ]  
  26.         .createInstance(Components.interfaces.nsILocalFile);  
  27.     try  {  
  28.         // Back slashes for windows   
  29.         file.initWithPath( fileName.replace(/\//g, "\\\\") );   
  30.     }  
  31.     catch (e) {  
  32.         if  (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH)  throw  e;  
  33.         alert("File '"  + fileName +  "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file." );  
  34.         return ;  
  35.     }  
  36.   
  37.     if  ( file.exists() ==  false  ) {  
  38.         alert("File '"  + fileName +  "' not found." );  
  39.         return ;  
  40.     }  
  41.     alert(file.path); // I test to get the local file's path.   
  42.     var  is = Components.classes[ "@mozilla.org/network/file-input-stream;1" ].createInstance( Components.interfaces.nsIFileInputStream );  
  43.     try  { is.init( file,0x01, 00004,  null ); }  
  44.     catch  (e) {  
  45.         if  (e.result!=Components.results.NS_ERROR_FILE_ACCESS_DENIED)  throw  e;  
  46.         alert("Unable to access local file '"  + fileName +  "' because of file permissions. Make sure the file and/or parent directories are readable." );  
  47.         return ;  
  48.     }  
  49.     var  sis = Components.classes[ "@mozilla.org/scriptableinputstream;1" ].createInstance( Components.interfaces.nsIScriptableInputStream );  
  50.     sis.init( is );  
  51.     var  data = sis.read( sis.available() );  
  52.   
  53.     alert("Data from file: "  + data);  // I test to get the local file's data.   
  54. }  
  55.   
  56. function  readFileIE(fileBrowser) {  
  57.     var  data;  
  58.     try  {  
  59.         var  fso =  new  ActiveXObject( "Scripting.FileSystemObject" );  
  60.   
  61.         var  fileName=fso.GetAbsolutePathName(fileBrowser.value);  
  62.         if  (!fso.FileExists(fileName)) {  
  63.             alert("File '"  + fileName +  "' not found." );  
  64.             return ;  
  65.         }  
  66.   
  67.         var  file = fso.OpenTextFile(fileName, 1);  
  68.   
  69.         data = file.ReadAll();  
  70.         alert("Data from file: "  + data);  
  71.         file.Close();  
  72.     }  
  73.     catch (e) {  
  74.         if  (e.number == -2146827859) {  
  75.             // This is what we get if the browser's security settings forbid   
  76.             // the use of the FileSystemObject ActiveX control   
  77.             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"' );  
  78.         }  
  79.         else   if  (e.number == -2146828218) {  
  80.             // This is what we get if the browser can't access the file   
  81.             // because of file permissions   
  82.             alert("Unable to access local file '"  + fileName +  "' because of file permissions. Make sure the file and/or parent directories are readable." );  
  83.         }  
  84.         else   throw  e;  
  85.     }  
  86. }  
  87.     </script>  
  88.   
  89. </head>  
  90. <body>  
  91.     <form name="form1" >  
  92.     Browse to select a file  
  93.     <input type="file"  name= "fileBrowser"  size= "125"  onchange= "readFile(this)"  />  
  94.     </form>  
  95. </body>  
  96. </html>  

 首先我们需要判断用户浏览器的类型来选择执行不同的function，IE中直接调用Scripting.FileSystemObject这个 ActiveXObject，不过如果用户的IE没有打开“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”的话是不能执行这行代码的， 在脚本中给出了提示，告诉用户必须将这个选项打开。

 IE的问题不大，因为我们完全可以直接使用input的value值得到文件的路径，这里给出的方法主要是可以得到文件的二进制数据，重点看看在 FireFox3中是如何做的。FireFox3中需要用户在配置页面中添加一个名称为 signed.applets.codebase_principal_support的键值，将值设为true，然后就可以通过代码中给出的方法得到文 件的本地路径了，同样也可以得到文件的二进制数据。

 

   这样，我的问题就可以解决了，不管是在IE中，还是在FireFox中，我都可以获取到用户所选文件的本地路径，然后保存在页面的隐藏域中，当用户提交页面时，服务器端代码便可以通过页面隐藏域中的值得到用户所选择的文件的路径，从而上传文件到服务器。

分享到：
| 【转】安装office2007后，每次打开word、ex ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    firefox7.0及以上版本获取图片路径方法

    在探讨如何在Firefox 7.0及以上版本中获取图片路径的方法之前，我们首先需要理解一些基本的概念和技术背景。本文将深入解析两种主要方法：利用`getAsDataURL()`和`createObjectURL()`函数，来帮助读者更好地掌握在...

    firefox_file.html

    关于如何从firefox中获取file控件里的实际路径的解决代码

    javascript 获取表单file全路径

    具体代码如下： 代码如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;get file input full path&lt;/title&gt; [removed] function getFullPath(obj) { if(obj) { //ie... } //firefox else if(window.navigator.userAge

    JS获取input file绝对路径的方法(推荐)

    2. **Firefox浏览器特别处理**：由于Firefox不返回文件的完整路径，文章中提供了`readFileFirefox`函数，这个函数利用了Firefox特有的组件`Components.classes`来创建一个`nsILocalFile`实例。这个实例可以用来获取...

    解决ajaxfileupload.js在IE9，firefox下文件超大无效

    ### 解决AjaxFileUpload.js在IE9与Firefox下文件过大导致无效问题 #### 背景介绍 在处理Web前端的文件上传功能时，我们经常会遇到浏览器兼容性问题，尤其是在处理较旧版本浏览器如IE9及Firefox时。本文将详细介绍...

    不同浏览器之间路径问题Demo

    例如，Chrome和Firefox通常能正确处理相对路径，而旧版IE可能需要特殊处理。特别是涉及到URL的相对解析时，例如在使用`src`或`href`属性时，不同浏览器可能有不同的解析逻辑。 4. **文件系统访问权限**： 部分...

    javascript 火狐(firefox)不显示本地图片问题解决

    在本例中，我们通过编写一段JavaScript代码来解决Firefox浏览器不显示本地图片的问题。首先，我们定义了一个`&lt;img&gt;`标签，这个标签将用于显示图片预览。紧接着，我们编写了一个`&lt;script&gt;`标签，其中包含了一个`file...

    读取input:file的路径并显示本地图片的方法

    3. **预览图片**：对于支持FileReader API的现代浏览器（如Chrome、Firefox、Safari、Edge等），可以使用`FileReader`对象的`readAsDataURL`方法将文件内容转换为Base64编码的URL，然后设置到`&lt;img&gt;`标签的`src`属性...

    解析使用JS 清空File控件的路径值

    这种做法的优点在于，它不仅兼容FireFox浏览器，而且支持所有主流浏览器，是一种相对稳妥的清空File控件值的方法。 在文章中，由于OCR扫描识别技术的限制，可能会出现一些字词识别错误或漏识别，开发者在阅读时需要...

    取得input要素的文件路径

    在早期版本的Firefox（例如18.0）中，当用户选择文件后，开发者可以通过`input`元素的`files`属性获取到`File`对象，而`File`对象的`name`属性则提供了文件的相对路径。然而，出于安全考虑，现代浏览器（包括Firefox...

    IE8上传文件时javascript取文件的真实路径的问题（\"C:\\fakepath\\xxxxx )

    2. **利用File对象的name属性**：虽然不能获取完整路径，但可以通过`File`对象的`name`属性获取到文件名，这在某些情况下已经足够了。 3. **使用FormData上传文件**：在需要将文件上传到服务器的情况下，可以创建一...

    python模拟firefox浏览器抓取数据

    ### Python 模拟 Firefox 浏览器抓取数据 #### 一、准备工作 为了实现用Python模拟Firefox浏览器抓取网页数据的功能，我们需要准备并安装一些必要的工具和库。 ##### 1.1 安装 Selenium Selenium 是一个强大的...

    Firefox技巧应用宝典

    【Firefox技巧应用宝典】是针对Firefox浏览器一系列实用技巧的集合，旨在提升用户在使用Firefox时的效率和体验。以下是对各个技巧的详细说明： 一、启动提速新招 通过在浏览器地址栏输入“about:config”，我们可以...

    filemanager-0.0.2.zip

    KindEditor的设计理念是简洁高效，它支持多种浏览器环境，包括Chrome、Firefox、Safari、IE等主流浏览器，这使得它在各种环境下都能保持良好的兼容性和稳定性。其轻量级的特性使得加载速度快，对服务器资源的需求...

    javascript firefox不显示本地预览图片问题的解决方法

    然而，由于安全策略的限制，Firefox浏览器默认不允许直接通过JavaScript访问本地文件系统，因此不能直接通过`&lt;img&gt;`标签的`src`属性加载本地文件路径来实现图片预览。这个问题可以通过一些技巧来解决，比如使用`file...

    asp.net 多图片上传 可预览 兼容火狐 IE

    在本场景中，"ASP.NET 多图片上传 可预览 兼容火狐 IE"是一个功能实现，它允许用户在网页上一次性上传多张图片，并在上传前或上传过程中提供预览功能，同时确保该功能在不同浏览器，如火狐（Firefox）和IE（Internet...

    解决！html中使用video标签调用本地视频结果只有音频没有视频画面

    虽然H.264和MP4格式在大多数现代浏览器（如Chrome、Firefox、Safari）中得到良好支持，但某些旧版本或非主流浏览器可能不支持。为了提高兼容性，可以添加多个`&lt;source&gt;`标签，提供不同编码或格式的视频源： ```html...

Magicbox
Global site tag (gtag.js) - Google Analytics