主动触发 input file 类型的鼠标点击效果

其实原始的上传 选中文件 确实有点丑了  

所以就需要我 给点装饰 效果   

在上面搞一个div  然后   通过点击div 来触发 input的事件 

div 我们是可以加上一些样式美化的

然后就是 怎么去实现了    file类型  input   点中的 出来的 选文件的框呢

div {
	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.
$('input[type=file]').trigger('click');

2.
$('input[type=file]').click();

2.  原生的方法

var 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);
})

原生还有的一种方法 但是不会触发  弹窗的 方法

var a = new Event('click');
file.dispatchEvent(a);

关注我 持续更新前端知识  持续挖坑填坑的  前端进阶之路

最后

以上就是无情发卡为你收集整理的主动触发 input file 类型的鼠标点击效果的全部内容，希望文章能够帮你解决主动触发 input file 类型的鼠标点击效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。