IE input file隐藏不能上传文件解决方法

标签：style   blog   http   color   java   os   io   strong   

当大神们都在探讨更深层次的问题时，我还在这里转载发些肤浅的问题解决方案。罢了，为了和我一样笨的后来人。

问题：

上传文件时，用<input type="file" />标签，但是默认的file标签很难看，而且每个浏览器下都有很大差距。

1.一般解决办法：

我们基本都把真正的file标签给隐藏，然后创建一个标签来替代它，比如我们创建一个a标签来替代它，隐藏file标签，单击a标签时触发file标签click弹出选择文件窗口，选择文件之后，触发file的change事件提交。

存在问题：

由于IE浏览器安全限制问题，没有点击file的浏览按钮选择文件都不让上传。

2.终极解决办法：

既然IE非得要亲自点击，我们可以变通一下，让自定义按钮存在又能真正点击到file标签。

解决方案是让file标签盖在a标签上，但file是透明的，这样用户看到的是a标签的外观，实际点击是file标签。

代码如下

<a style="position:relative;" href="javascript:void(0);">
　　　　　上传文件
        <input style="position:absolute;left:0;top:0;z-index:999;opacity:0;"type="file" name="file"  />
</a>

注意：

a.取消a标签onclick事件，因为实际上已经不需要a标签的onclick触发file的click了，而是直接就点击到file；
b.file标签不需要再设置display:none隐藏，而是通过opacity:0让它完全透明，实际它是浮在a标签之上
c.file标签设置position:absolute后要给left:0、top:0，否则file标签不会吻合覆盖a标签导致点击按钮的时候点不到file标签　

参考原文：http://www.qttc.net/201305334.html（感谢原文作者的分享）

IE input file隐藏不能上传文件解决方法,布布扣,bubuko.com

IE input file隐藏不能上传文件解决方法

标签：style   blog   http   color   java   os   io   strong   

原文地址：http://www.cnblogs.com/talentzemin/p/3902899.html