zoukankan      html  css  js  c++  java
  • 【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>
  • 相关阅读:
    CopyOnWriteArrayList分析
    java锁和同步
    线程池原理
    Hadoop1的安装
    Hadoop2的HA安装(high availability):JournalNode+ zookeeper
    Hadoop2的HA安装(high availability):nfs+zookeeper
    Hadoop2的FN安装(federated namespace)
    Redis 基础知识
    mycat
    GitFlow及项目工作流程
  • 原文地址:https://www.cnblogs.com/h--d/p/5703899.html
Copyright © 2011-2022 走看看