admin管理员组文章数量:1558092
普通的file控件，在IE和firefox的表现会有所不同，为了美化上传控件，通常会做一个text+button来替代file控件。 设置file控件完全透明，这样在点击button的时候，其实就是点击隐藏的file控件的浏览，本来应该完全可以做到了，但是因为我的项目中这个控件是在一个弹出（iframe）页面中，不知道是样式冲突还是其他的什么原因，在IE下，隐藏的file控件并没用变成透明的，而是有一块白色的背景，还覆盖了text+btton，这样就达不到我们要的那个效果了。在这种情况下只有FF浏览器支持了。
于是乎，在该控件下添加一个隐藏的Iframe,里面放一个只有file控件的页面，当点击button按钮时，就触发子页面中的file控件的点击事件，打开浏览文件窗口，选择你要上传的文件，然后上传到服务器，但是在页面上点击button触发子页面的file控件的click事件，只有IE支持，FF不支持。具体原因好像是说FF处于安全的考虑，禁止用其他的函数来触发file控件的点击事件。
综上，为了实现，只能两种方式并存了，在IE浏览器下，操作的是子页面的file控件，在FF浏览器下，操作的是当前页面的file控件。
补充：如果在页面上直接放一个text+button和一个隐藏的file控件，当点击button的时候，执行file控件的点击事件，并将值赋给text。这种情况下在用户提交的时候file控件框的值会被自动清空，这样在传到服务器上的就是空值，也就是无法上传。这个好像是IE安全处于安全的考虑，必须用户直接点击file控件的浏览框才能上传。但是如果是触发IFRAME页面中的file控件，然后通过IFRAME页面中的file控件上传则是可以的。代码如下面所示。（为什么呢？说时话我也不太清楚，但是就是这样能实现）
部分代码：
当前页面
<input id="fileName" name="fileName" class="ipt mr5" type="text" readonly />
<a id="loadBtn" class="btn_yl ml5" href="javascript:void(0)" οnclick='$("#softupload").contents().find("#flUpLoad").click()'>
<span><span class="fc_42">浏览</span></span></a>
<input class="fileItem" id="flUpLoad" name="flUpLoad" type="file" οnchange="document.getElementById('fileName').value=this.value;fileUpload();" />
<iframe id="softupload" name="softupload" src="SoftUpload" style="display: none"> </iframe>
子页面：
<form id="sform" method="post" enctype="multipart/form-data">
<input type="file" name="flUpLoad" id="flUpLoad" οnchange="Import()"/>
</form>
样式：
.fileItem{
position: absolute;
*top:3px;
right:6px;
*right:16px;
_left:310px;
height: 24px;
/**width:50px;*/
display:none \9;
*display:none;
_display:none;
opacity: 0;
filter:alpha(opacity=0);
}
版权声明：本文标题：解决美化后的文件上传控件（type=file），IE和firefox不兼容的问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727375878a1111702.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论