`
wyzuomumu
  • 浏览: 108484 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

firefox获取不到HTML标签的file控件的完整路径

    博客分类:
  • WEB
web 
阅读更多

相信很多人都使用过<input type="file"/>这样的HTML控件,它看起来非常普通,是我们在做Web应用程序中用于上传客户端本地文件时不可缺少的控件,然而最近我发现这个控件在最新的FireFox浏览器(或者最新的IE8中也会存在这个问题,我没有尝试过,读者可以试一下)中却失去了效果,导致我们在通过这个控件的value属性得到的值中只包含了文件名而没有文件路径,这个在IE7中是可以正常获取到全文件名的(即文件完整路径+文件名)。IE7和大部分当前流行的浏览器(如FireFox2版本)都可以获取到文件的路径,但是FireFox3却不行,现在给出一点解法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>path file Page</title>
  <script type="text/javascript">
function readFile(fileBrowser) {
    if (navigator.userAgent.indexOf("MSIE")!=-1) {
readFileIE();
}else 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 readFileIE(){
alert(document.form1.fileBrowser.value.toString());
}


function readFileFirefox(fileBrowser) {
try {        
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("Unable to access local files due to browser security settings");
}
var fileName=fileBrowser.value;
   alert(fileName);
}
</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,然后就可以通过代码中给出的方法得到文件的本地路径了,同样也可以得到文件的二进制数据。

有关about:config和如何配置FireFox浏览器,读者可以参考下面的链接: http://www.cnblogs.com/looky/archive/2008/03/18/1111859.html 这样,我的问题就可以解决了,不管是在IE中,还是在FireFox中,我都可以获取到用户所选文件的本地路径,然后保存在页面的隐藏域中,当用户提交页面时,服务器端代码便可以通过页面隐藏域中的值得到用户所选择的文件的路径,从而上传文件到服务器。

分享到:
评论

相关推荐

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

    通过获取到File控件的DOM元素,然后重新赋值其outerHTML属性,可以实现清空File控件的路径值。但这种方法只在Internet Explorer浏览器中有效,不适用于其他浏览器。 第三种方法是为了兼容Firefox浏览器而考虑的。在...

    关于火狐3和ie无法浏览文件全路径问题

    虽然给定的部分内容代码未能完整展示,但从已有的代码片段中可以看出,作者试图通过检测浏览器类型(IE或Firefox),并根据不同类型的浏览器采用不同的方法来获取本地文件的路径。这种方法的核心在于使用浏览器特有...

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

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

    基于jquery跨浏览器显示的file上传控件

    此外,Firefox浏览器对file控件的宽度定义不支持,而只支持size属性,且在提交时只上传文件名而不包括路径。 为了解决这些跨浏览器的兼容性问题,可以使用JavaScript和jQuery来创建一个自定义的file上传控件。通过...

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

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

    JS获取文件大小方法小结

    然而,这种方法并不普遍适用,因为它在IE7、IE8、Firefox以及Chrome等现代浏览器中可能无法正常工作。以下是这种方法的示例: ```javascript function getFileSize(filePath) { var image = new Image(); image....

    IE火狐内核本地打开网页

    而火狐,即Firefox,是由Mozilla基金会开发的开源浏览器,其内核名为Gecko,它遵循W3C标准,具有良好的跨平台性。 要在Winform应用中使用这两种内核打开网页,开发者通常会借助嵌入式浏览器控件。对于IE内核,微软...

    web 中经常应用的上传控件

    1. 支持多种浏览器:兼容Internet Explorer、Firefox、Chrome、Safari等主流浏览器。 2. 全面的文本编辑功能:包括字体样式、颜色、段落格式、列表、对齐方式、表格等。 3. 图片和文件管理:内置了上传功能,用户...

    SWFupload 上传控件的使用的使用

    - 浏览器兼容性:SWFUpload依赖Flash,因此不支持不支持Flash的浏览器(如Apple的Safari和最新的Chrome、Firefox)。 - 安全性:确保你的服务器端有完善的文件上传验证机制,防止恶意文件上传。 - 用户体验:合理...

    .net图片批量上传控件

    12. **跨浏览器兼容**:考虑到不同的用户可能使用不同的浏览器,控件应能兼容主流的浏览器,如Chrome、Firefox、Safari和Edge等。 13. **FlexSC组件**:压缩包中的"flexsc"可能是FlexScroller的简称,这可能是一个...

    input file上传文件样式支持html5的浏览器解决方案

    本文将深入探讨两个关键问题及其解决方案,这些问题分别是:在Firefox下无法通过CSS改变File上传控件的width,以及在不同浏览器中File上传控件的外观和行为不一致。 首先,让我们关注第一个问题:在Firefox下,File...

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

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

    ie图片上传滤镜.doc

    在图片上传预览中,当用户选择文件后,程序会调用`file`表单控件的`select()`方法,然后通过`document.selection.createRange().text`获取文件路径。接着,使用滤镜对选定的图片进行预览。这种方法的一个限制是,`...

    JavaScript图片上传预览效果

    - **DOMFile数据获取**:对于Firefox 3及以上版本,可以使用`file.files[0].getAsDataURL()`获取Data URI。 - **远程数据获取**:当需要支持Opera、Safari和Chrome等浏览器时,可以通过后端处理返回图片数据。 ####...

    C# Web 调用Media player

    对于不支持ActiveX的现代浏览器(如Chrome或Firefox),可能需要使用其他HTML5的媒体元素,如`&lt;video&gt;`标签。 在C# Web应用中,Media Player的集成主要在前端页面上进行,使用HTML和JavaScript代码。以下是一个基本...

    文件上传控件 webuploader

    WebUploader 使用JavaScript编写,兼容主流的浏览器,包括Chrome、Firefox、Safari、IE8+等。 在配置WebUploader时,我们需要了解以下几个关键参数: 1. **swf**: 这是Flash组件的路径,用于在不支持HTML5的浏览器...

    Python selenium文件上传方法汇总.pdf

    对于那些不使用标准`&lt;input type="file"&gt;`的上传控件,Selenium无法直接操作。这些控件可能是`&lt;a&gt;`标签、`&lt;div&gt;`、`&lt;button&gt;`或`&lt;object&gt;`等。在这种情况下,我们需要通过模拟操作系统级别的交互来处理文件选择。 ...

Global site tag (gtag.js) - Google Analytics