大家用到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. 数据库2.0改进e-r图

    1.新建教师实体集并将1.0中的任课教师,教务老师归类为教师. 2.将实体集考勤表设置为弱实体集. 3.将学生与考勤表的关系由属于关系设置为出勤关系. 4.出勤关系中设置出勤记录属性和教师留言属性. ...

  2. 11. SpringMVC拦截器（资源和权限管理）

    1.DispatcherServlet SpringMVC具有统一的入口DispatcherServlet,所有的请求都通过DispatcherServlet.     DispatcherServl ...

  3. 用jconsole监视内存使用情况

    最近做性能压测,学习到可以用jconsole查看内存使用(连接端口:JMX_PORT=8060). 打开后发现,老年代内存一直无法释放,应该是应用启动参数中,老年代内存分配不够.加大内存,得到缓解:- ...

  4. ubuntu 安装u盘恢复

    XP下进入CMD命令窗体,Vista及7/8下右键以管理员方式运行DOS窗体(win8.1:开始屏幕-windows系统-命令提示符) 输入DISKPART,会显示计算机名,及DISKPART> ...

  5. 【转】Luajit-2.1.0-beta1的发布和生成arm64用bytecode的解脱

    来自:Luajit-2.1.0-beta1的发布和生成arm64用bytecode的解脱 前情提要:由于苹果要求2015年2月1日上架的新app必须支持64位的arm64,旧的app也得在6月1日支持 ...

  6. Java可重入锁与不可重入锁

    可重入锁,指的是以线程为单位,当一个线程获取对象锁之后,这个线程可以再次获取本对象上的锁,而其他的线程是不可以的. synchronized 和   ReentrantLock 都是可重入锁. 可重入 ...

  7. 兼容当前五大浏览器的渐变颜色背景gradient的写法

    <style type="text/css" media="screen"> #gradient { width: 200px; height: 2 ...

  8. 用NBU无法还原数据库到ASM磁盘

    描述:用NBU无法还原数据库到ASM磁盘,却可以还原到数据库本地磁盘 错误提示: ORA-15025: could not open disk "/dev/mapper/DATA1" ...

  9. jquery 不选择第一个

    参考 https://zhidao.baidu.com/question/174343639.html th:not(':first')

  10. Codeforces Beta Round #14 (Div. 2)

    Codeforces Beta Round #14 (Div. 2) http://codeforces.com/contest/14 A 找最大最小的行列值即可 #include<bits/s ...