概述

  • 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. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  2. POJ1159 Palindrome(dp)

    题目链接. 分析: 感叹算法的力量. 方法一: 设 dp[i][j] 为字符串 s, 从 i 到 j 需要添加的最少字符数. 那么如果 s[i] == s[j], dp[i][j] = dp[i+1] ...

  3. 2015第30周三Spring常用工具类

    文件资源操作 文件资源的操作是应用程序中常见的功能,如当上传一个文件后将其保存在特定目录下,从指定地址加载一个配置文件等等.我们一般使用 JDK 的 I/O 处理类完成这些操作,但对于一般的应用程序来 ...

  4. HDOJ 1019 Least Common Multiple(最小公倍数问题)

    Problem Description The least common multiple (LCM) of a set of positive integers is the smallest po ...

  5. Android新浪微博客户端（七）——ListView中的图片异步加载、缓存

    原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...

  6. windows快捷键和命令

    以管理员方式打开命令行界面:win+X+A 打开服务界面:services.msc 删掉windows系统记住的WIFI密码 cmd下面运行 显示存储的无线连接netsh wlan show prof ...

  7. AssertValid函数学习

    转自http://tsitao.blog.163.com/blog/static/29795822006914105840496/ VC的调试中,AssertValid和Dump函数的应用 CObje ...

  8. Windows7 64位系统搭建Cocos2d-x 2.2.1最新版以及Android交叉编译环境（具体教程）

    原文地址:http://blog.csdn.net/sttyytw/article/details/17005263 声明:本教程在參考了下面博文,并经过自己的摸索后实际操作得出,本教程系本人原创,因 ...

  9. 【代码优化】equals深入理解

    覆盖equals时,遵守通用约定 对equal方法的覆盖看起来非常easy,可是有很多情况是容易导致错误,最好的避免这些错误的办法 就是不覆盖equals方法. 必须遵循的原则: 自反性--对于不论什 ...

  10. Android学习–Android app 语言切换功能

    功能: app用户根据自己的语言喜好,设置app语言.语言设置只针对本app,并在下次启动应用时保留前一次启动设置. 更新语言: public static void changeAppLanguag ...