【JS】 伪主动触发input:file的click事件

时间:2023-03-09 06:00:35
【JS】 伪主动触发input:file的click事件

  大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种:

  1. 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的还是上面的input:file标签,这种方法考验开发的样式水平了,不在细说
  2. 采用js去控制,触发input:file标签的click事件。这样就可以使用漂亮的图案来替换input:file的位置,代码如下:
 <html>
<head>
</head>
<body>
<input type="file" id="fileElem" style="display:none" >
<button href="#" id="fileSelect" onclick="openBrowse()">Select some files</button>
</body>
<script> function openBrowse(){
var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
if(ie){ document.getElementById("fileElem").click(); }else{ var a=document.createEvent("MouseEvents");
a.initEvent("click", true, true);
document.getElementById("fileElem").dispatchEvent(a); }
}
</script> </html>