IE和谷歌浏览器下文件上传文本框隐藏的问题解决方案

来源:互联网 发布:java教学视频 编辑:程序博客网 时间:2024/06/16 21:51

首先,在浏览器安全的环境下,没有被点击的文件上传控件是不能上传的(调用click也不行)

所以主流的方法是,把input[type='file']做成隐藏的然后浮于你要展示的样子的上面,使用户点击的时候实际上是触发透明的文件上传框



但是,最恶心的一点就是IE和谷歌浏览器下input[type='file']是由文本框和一个按钮组成,而火狐只是一个按钮,所以,在IE和谷歌下面在左边点击的时候必须双击才可以,而且画面上会出现光标


那么解决上面的问题方案就是,给file对象追加字体大小样式<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  multiple="multiple" style="font-size:250px;"/>是的整体往左边挤,让按钮撑满整个容器就好了

原创粉丝点击