不用点击file类型的input弹出文件选择对话框

最新推荐文章于 2023-01-31 15:34:16 发布

newborn2012

最新推荐文章于 2023-01-31 15:34:16 发布

阅读量9.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： trigger file input opacity

本文链接：https://blog.youkuaiyun.com/newborn2012/article/details/16821823

html 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了在JavaScript中实现点击事件触发的两种方法：通过触发器函数和利用input元素覆盖目标元素。同时提供了如何实现类似jQuery的trigger函数的示例，并讨论了在实际应用中的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以使用trigger方式，javascript中没有原生的trigger函数，可以自己写一个，也可以直接使用jquery的实现：

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick = function(){alert("button1");trigger(button2,"onclick");}
button2.onclick = function(){alert("button2");}
function trigger(ele,event) 
{ele[event]();}

也可以使用更加简单的方式，就是将input覆盖住要点击的图片或者超链或者其它div，然后将input设置成完全透明，这样点击图片时其实点击的是input，如下：

<div class="ps-image" style="width:300px;height:300px;border:0px sold red; background:url('/images/ps.png')">
<input type="file" id="file" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>
</div>

参考资料：

1，如何点击a标签, 弹出input file 上传文件对话框？？？

2，javascript 怎么实现jquery的trigger触发事件的功能。