H__D  

  大家用到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>

 

posted on 2016-07-25 16:07  H__D  阅读(7817)  评论(0编辑  收藏  举报