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

【JS】 伪主动触发input:file的click事件的更多相关文章

  1. 伪触发 input file 的click事件

    前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...

  2. 给js创建的一个input数组绑定click事件

    <html> <body> <input type="button" name="input[]" value="按钮1 ...

  3. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  4. 主动触发input框的失去焦点事件，阻止输入法跳出

    今天遇到个问题,我在手机做一个选择生日的功能,但是当我点击input框时,事件选择插件和输入法都弹出来了,很丑,然后就想阻止输入法弹出来, 网上一个方法是:在input框的获取焦点事件里,主动触发失去 ...

  5. js jq 主动触发事件

    js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...

  6. JQuery的click,trigger触发a标签的click事件无效的问题分析

    今天在做一个手机端webAPP链接下载的时候,给a标签一个下载链接,但是通过 <a id="downFile" download="" href=&quo ...

  7. 使用jquery trigger 触发a标签的click事件取代window.open方法

    var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32&qu ...

  8. echarts中的区域缩放组件dataZoom，主动触发选区缩放点击事件

    options设置 toolbox: { // 工具栏 feature: { dataZoom : { // 选时间缩放功能 show : true, // show为true时,才能触发takeGl ...

  9. 移动端触发touchend后阻止click事件

    // vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...

随机推荐

  1. eclipse启动tomcat无法访问的解决方法

    转自:https://www.cnblogs.com/longshiyVip/p/4637680.html 问题:: tomcat在eclipse里面能正常启动,但在浏览器中访问http://loca ...

  2. require.js 学习基础

    RequireJS 是一个JavaScript模块加载器,他的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要目的还是为了代 ...

  3. jenkins 修改工作目录

    修改Jenkins路径 Jenkins的默认安装路径是/var/lib/jenkins 现在由于这个根目录的磁盘太小,所以切换到/data 目录下. Jenkins目录.端口.工作目录等信息在/etc ...

  4. 编写ios和android共用的c/c++库时 使用iconv的问题(转)

    因为在项目中需要同时维护ios和Android,不同的代码不利于开发的便捷和以后的维护,所以在最近的一个项目中,两种手机应用的通信部分打算使用c/c++库来统一编写,ios调用.a静态库,androi ...

  5. JAVA WEB开发中的会话跟踪

    常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份. Http协议是一种无状态的协议,一旦数据交换完毕,客 ...

  6. JAVA WEB开发中的资源国际化

    为什么要国际化? 不同国家与地区语言,文化,生活习惯等差异.在数字,时间,语言,货币,日期,百分数等的不同. 两个名词: I18N:即资源国际化,全称为Internationalization,因为首 ...

  7. L2tp协议简单解析

    1.L2TP简介 L2TP(Layer 2 Tunneling Protocol,二层隧道协议)是VPDN(Virtual PrivateDial-up Network,虚拟私有拨号网)隧道协议的一种 ...

  8. 常用类一一MATH类一一两个静态常量PI 和E，一些数学函数。

    package test; public class MathTest { public static void main(String[] args) { System.out.println(Ma ...

  9. 输入N组父子对，求父子对所组成的二叉树的高度----17年某公司的笔试题

    题目的大致意思如下: 输入N组数,一组数代表一个父子对(如,0 1,0代表父节点,1代表子节点),求这N组数所组成的二叉树的高度: 例如: 输入:6  0 1  0 2  1 3  1 4  2 5 ...

  10. Invoke，BeginInvoke的作用

    这两个方法主要是让给出的方法在控件创建的线程上执行 凡是使用BeginInvoke和Invoke调用的线程都是在UI主线程中执行的