html5中文学习网

您的位置: 首页 > 网页制作 > html教程 » 正文

使用trigger方式实现不用点击file类型的input弹出文件选择对话框_HTML/Xhtml_网页制作

[ ] 已经帮助:人解决问题
点评:可以使用trigger方式实现不用点击file类型的input弹出文件选择对话框,因为javascript中没有原生的trigger函数,所以自己写了一个,喜欢的朋友可以参考下
可以使用trigger方式,javascript中没有原生的trigger函数,可以自己写一个,也可以直接使用jquery的实现:BQpHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
BQpHTML5中文学习网 - HTML5先行者学习网
var button1 = document.getElementById("button1"); BQpHTML5中文学习网 - HTML5先行者学习网
var button2 = document.getElementById("button2"); BQpHTML5中文学习网 - HTML5先行者学习网
button1.onclick = function(){alert("button1");trigger(button2,"onclick");} BQpHTML5中文学习网 - HTML5先行者学习网
button2.onclick = function(){alert("button2");} BQpHTML5中文学习网 - HTML5先行者学习网
function trigger(ele,event) BQpHTML5中文学习网 - HTML5先行者学习网
{ele[event]();} BQpHTML5中文学习网 - HTML5先行者学习网
BQpHTML5中文学习网 - HTML5先行者学习网
也可以使用更加简单的方式,就是将input覆盖住要点击的图片或者超链或者其它div,然后将input设置成完全透明,这样点击图片时其实点击的是input,如下:BQpHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
BQpHTML5中文学习网 - HTML5先行者学习网
<div class="ps-image" style="width:300px;height:300px;border:0px sold red; background:url('/images/ps.png')"> BQpHTML5中文学习网 - HTML5先行者学习网
<input type="file" id="file" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/> BQpHTML5中文学习网 - HTML5先行者学习网
</div> BQpHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助