概述

  • 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. Qt经典—线程、事件与Qobject（耳目一新）

    介绍 You’re doing it wrong. — Bradley T. Hughes 线程是qt channel里最流行的讨论话题之一.许多人加入了讨论并询问如何解决他们在运行跨线程编程时所遇到 ...

  2. android开发--翻转闹铃（从制作到打包）

    (转载请声明,文章原作地址http://blog.csdn.net/buptgshengod) 最近在家放假,一直想做一个手机应用,于是就自己动手做起来了.想到一个注意就是当闹铃响的时候翻转闹铃,声音 ...

  3. "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Connection

    "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Conne ...

  4. MFC自定义消息

    本文地址:http://blog.163.com/strive_only/blog/static/893801682010101911467765/ 消息机制是windows的典型运行机制,在MFC中 ...

  5. Hbase设计实战

    Hbase设计实战 本文通过一个游戏公司客户实际案例的讲解,分析了 Hbase 表设计及开发在实际案例中的运用,对比了不同的 Hbase 设计考量对客户端访问模式及检索性能的差异.读者通过案例中 Hb ...

  6. MaterialEditText

    https://github.com/rengwuxian/MaterialEditText http://www.rengwuxian.com/post/materialedittext

  7. uva 317 - Hexagon（规律推导）

    题目连接:317 - Hexagon 题目大意:在一个19个六边形组成的图形上玩一个游戏,给出9个数字, 分成3组, 分别可以填在左上角, 上, 有上角,因为对于小六边形来说, 对边的数是相同的, 然 ...

  8. linux下mysql5.5的安装

    #rpm –qa|grep –i mysql查看已安装的mysql版本 如果有已存在的mysql版本则删除 安装服务端和客户端,去Oracle官网下载: # rpm -ivh MySQL-serve ...

  9. ASP.NET MVC 文件异步上传问题处理

    最近在做一个网站,用asp.net MVC4.0来开发,今天遇到了个小问题,通过查找相关渠道解决了,在这里把这个问题写出来,问题非常简单,不喜勿喷,mark之希望可以给遇到相同问题的初学者一点帮助.我 ...

  10. HTML学习(1)

    1.缩写和首字母缩写<abbr><acronym> <abbr title="etcetera">etc.</abbr> <a ...