关于<input type="file" >浏览器兼容问题

最近在做上传文件前端的 jQuery，遇到浏览器兼容问题，上网查了一下看到网友总结很到位，具体如下：

解决思路是这样子的：
1、首先把input=file做成透明来隐藏
2、要明确一点：用其它按钮的click时间来触发input=file时间是不可能的，一定会拒绝访问
3、input=file必须被主动触发，而不是由Js函数来被动click
4、唯一的办法：点击你的submit按钮，而实际上点的是input=file的按钮
5、所以要用Js控制透明之后的input=file绝对位置
6、曾经的一个做法是，当鼠标进入submit按钮区域，就把input=file动态的移动到submit的位置，相当于有个透明层位于submit上方
7、此时点击submit首先影响的是把它给挡住的input=file，然后再发生自己的点击事件，这样就属于主动点击input=file的按钮
8、需要注意的是隐藏和坐标计算，包括焦点处理都得要妥善完成，你可以先用半透明调整好位置

 

==================================================================

参考：自定义上传按钮样式的终极解决方案_input透明法

代码如下：

   

上传图片

    

给其增加样式：

.div1{

float: left;

height: 41px;

background: #f5696c;

144px;

position:relative;

}

.div2{

text-align:center;

padding-top:12px;

font-size:15px;

font-weight:800

}

.inputstyle{

     144px;

    height: 41px;

    cursor: pointer;

    font-size: 30px;

    outline: medium none;

    position: absolute;

    filter:alpha(opacity=0);

    -moz-opacity:0;

    opacity:0; 

    left:0px;

    top: 0px;

}

   

上传图片

    

如此就可以是实现“点击$(".div2")上传文件”的效果了。