在隐藏的文件输入框上调用click()方法
从Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)开始,你可以隐藏掉默认的的文件输入框元素,使用自定义的界面来充当打开文件选择对话框的按钮。实现起来很简单,你只需要使用样式display:none把原本的文件输入框隐藏掉,然后在需要的时候调用它的click()方法就行了。
考虑下面的HTML:
Select some files
处理click事件的代码如下:
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"}, false);
这样,你就能任意改变这个文件选择按钮的样式了。
参考:https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications#%E5%9C%A8%E9%9A%90%E8%97%8F%E7%9A%84%E6%96%87%E4%BB%B6%E8%BE%93%E5%85%A5%E6%A1%86%E4%B8%8A%E8%B0%83%E7%94%A8click%28%29%E6%96%B9%E6%B3%95
https://segmentfault.com/q/1010000004430586
方法二:
相信很多人都碰到过这个问题,文件上传控件透明后有的要点击两次才能弹出选择文件窗口,这里将将介绍如何避免要双击,只需要单击是可以实现的。 本来一直无心留意这个图片上传file按钮的BUG,因为有时候为了效果好看有时候我们要做点什么比如隐藏input模拟点击。FF可以chrome也可 以,唯独IE不行,报安全错误。所以还是得找方法解决,最终在某网站找到了,只是把input按钮的透明度改为0然后定位到最顶层,虽然透明,不表示没 有,这样点击上传时不影响效果又能实现所要的效果。真心不错。方法其实很简单。下面就介绍如何操作。
示例效果解图如下:
1、特别注意样式的写法。跟文件上传控件的参数
值得注意的是height:130%,font-size:100px,这样显示上传的文字就会变大,把点击的区域变大了,这样就可以单击可以了。样式如下:
.upload{width:100px;height:100px;line-height:100px;position:relative;border:1px solid #ddd;background:#f6f6f6;text-align:center;color:#333;overflow:hidden;}
#fileupload{position:absolute;bottom:0;left:0;font-size:100px;height:130%;width:100%;z-index:1;opacity:0;filter:alpha(opacity=0);}
2、完整代码如下:
file点击上传控件.upload{width:100px;height:100px;line-height:100px;position:relative;border:1px solid #ddd;background:#f6f6f6;text-align:center;color:#333;overflow:hidden;}
#fileupload{position:absolute;bottom:0;left:0;font-size:100px;height:130%;width:100%;z-index:1;opacity:0;filter:alpha(opacity=0);}
点击上传