概述

  • input:file本身自带的样式不太好看，但是又没法设置样式。
  • 由于系统限制，不能通过代码触发，只允许用户自主点击。
  • 通常的解决办法是，把input:file透明化，实际上点击的还是input:file。

方案

  • 虽然可以通过概述中的办法用css实现，但始终还是占据了位置。
  • 以下的通过javascript实现的触发事件，简单的一行代码即可搞定：D 
     <body>
    
   <input type="file" id="demo">
    
   <hr>

   <h5 onclick="document.querySelector('#demo').click()")>虽然我不是按钮，不过你点我的话，是可以触发上传的哦，
    
     <br>
    
     p.s:即使input:file隐藏了也能。</h5>
    
 </body>

javascript触发input-file的click事件的更多相关文章

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

    大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种: 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的 ...

  2. 伪触发 input file 的click事件

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

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

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

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

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

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

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

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

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

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

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

  8. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  9. click事件触发也有失灵的时候？

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  10. bootstrap 3 中表单元素的写法 ---- 重点是 input file 元素的

    我们知道file元素,因为有许多的插件可以使用,往往我们不需要写样式,但是如果要求我们自己写样式(利用bootstrap 3)实现一个file极简样式如何写呢? 下面我们先来看看整个表单的样子! 重点 ...

随机推荐

  1. 14.3 InnoDB Multi-Versioning InnoDB 多版本

    14.3 InnoDB Multi-Versioning InnoDB 多版本 InnoDB 是一个多版本的存储引擎,它保持信息关于改变的数据老版本的信息, 为了支持事务功能比如并发和回滚. 这些信息 ...

  2. COJ 0015 20602铁轨

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=15 20602铁轨 难度级别:B: 运行时间限制:1000ms: 运行空间限 ...

  3. 维基百科上—数据仓库、数据挖掘、OLAP三者之间的区别

    数据仓库可以作为数据挖掘和OLAP等分析工具的资料来源,由于存放于数据仓库中的资料,必需经过筛选与转换,因此可以避免分析工具使用错误的资料,而得到不正确的分析结果. 数据挖掘和OLAP同为分析工具,其 ...

  4. HDOJ的题目分类

    模拟题, 枚举 1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 10 ...

  5. 130+ essential vim commands

    Basics :e filename Open filename for edition :w Save file :q Exit Vim :q! Quit without saving :x Wri ...

  6. 《算法实战策略》-chaper19-队列、栈和双端队列

    对于计算机专业的学生来说,他们一定会很熟悉一句话:程序设计 = 算法 + 数据结构.而根据笔者的理解,所谓程序设计其实就是为了编程解决实际问题,所谓算法是一种解决问题某种思维的方法,但是思维需要得到编 ...

  7. OpenGL —— 基础笔记

    1.基础博文    链接:http://blog.csdn.net/lotusone?viewmode=contents 2.绘制文字    链接:http://www.cnblogs.com/xia ...

  8. const和violate

    const修饰变量 C语言中,const修饰的变量是只读的,本质还是变量,修饰的变量也会在内存中占用空间(这不废话么)本质上const只对编译器有用,在运行时无用.const和类型顺序无要求,一般类型 ...

  9. SKAction类

    继承自 NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit.framewo ...

  10. &lt;五&gt;读《《大话设计模式》》之工厂模式

    怎么又是工厂模式呢?上次不是讲过简单工厂模式吗?不错.此工厂模式非彼工厂模式. 工厂模式:定义一个用于创建对象的接口.让子类决定实例化那一个类,工厂方法是一个类的实例化延迟到其子类. 还是以代码来进行 ...