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


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

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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM