概述

  • 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. Matrix(线段树版)

    poj2155:http://poj.org/problem?id=2155 题意;同上一遍随笔. 题解:这里用二维线段树打了一发.第一次学习别人的代码.才学的.这种树套树的程序,确实很费脑子,一不小 ...

  2. [转]Kafka/Metaq设计思想学习笔记

    收集的一些kafka的信息: http://my.oschina.net/geecoodeer/blog/194829

  3. [Android] 混音线程MixerThread

    MixerThread是Android音频输出的核心部分,所有Android的音频都需要经过MixerThread进行混音后再输出到音频设备. MixerThread的继承关系如下: MixerThr ...

  4. Quantization Method

    如上一篇Quantization所说,可以在编码端通过设置offset来调整量化后的值,从而趋向于期望的量化值,而且在逆量化公式可以看出offset值在逆量化的时候是不会用到的. 目前来说,确定off ...

  5. keil优化论

    谈到优化,其实很多人都哭笑不得,因为在一个C51软件工程师的生涯中,总要被KEIL的优化耍那么一次到几次.我被耍过,想必看着文章的你也被耍过,如果你回答说不,那只能说你写的C51程序不多! 看看KEI ...

  6. 【日语】secret base

    君(きみ)と夏(なつ)の终(お)わり 将来(しょうらい)の梦(ゆめ)Kimi to natsu no owari shourai no yume大(おお)きな希望(きぼう) 忘(わす)れないOoki ...

  7. 【1】JAVA---地址App小软件（AddressApp.class）（初步接触项目开发的分层思想）（表现层）

    这个是表现层的main方法. 实现的地址信息有: 姓名,性别,年龄,电话,地址. 实现的功能有: 增加地址: 删除地址: 修改地址: 查找地址:其中年龄的查找为年龄段的查找. 数据存储的方式为文件存储 ...

  8. HDU_1071——积分求面积,抛物线顶点公式

    Problem Description Ignatius bought a land last week, but he didn't know the area of the land becaus ...

  9. shell介绍

    shell介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一:学好shell的3个基本条件: 1.vi/vim编辑器的熟练使用,ssh终端及".vimrc" ...

  10. CodeForces 146E - Lucky Subsequence DP+扩展欧几里德求逆元

    题意: 一个数只含有4,7就是lucky数...现在有一串长度为n的数...问这列数有多少个长度为k子串..这些子串不含两个相同的lucky数... 子串的定义..是从这列数中选出的数..只要序号不同 ...