其实原始的上传 选中文件 确实有点丑了
所以就需要我 给点装饰 效果
在上面搞一个div 然后 通过点击div 来触发 input的事件
div 我们是可以加上一些样式美化的
然后就是 怎么去实现了 file类型 input 点中的 出来的 选文件的框呢
复制代码
1
2
3
4
5
6
7
8
9
10
11div { height: 200px; width: 200px; font-size: 32px; text-align: center; line-height: 200px; border: 1px solid #f00; margin: 0 auto; } <div>上传文件</div> <input type="file" hidden />
1. 通过jquery 有两种实现方法
复制代码
1
2
3
4
51. $('input[type=file]').trigger('click'); 2. $('input[type=file]').click();
2. 原生的方法
复制代码
1
2
3
4
5
6
7var div = document.querySelector('div'); var file = document.querySelector('input'); $('div').click(function() { var ev=document.createEvent("MouseEvents"); ev.initEvent("click", true, true); file.dispatchEvent(ev); })
原生还有的一种方法 但是不会触发 弹窗的 方法
复制代码
1
2var a = new Event('click'); file.dispatchEvent(a);
关注我 持续更新前端知识 持续挖坑填坑的 前端进阶之路
最后
以上就是无情发卡最近收集整理的关于主动触发 input file 类型的鼠标点击效果的全部内容，更多相关主动触发内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复