概述

  • 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. LD1-K(求差值最小的生成树)

    题目链接 /* *题目大意: *一个简单图,n个点,m条边; *要求一颗生成树,使得其最大边与最小边的差值是所有生成树中最小的,输出最小的那个差值; *算法分析: *枚举最小边,用kruskal求生成 ...

  2. mongodb清洗数据

    1,数据库连接超时:DBPool的连接时的配置: 自己进行设置:   MongoClientOptions mco = new MongoClientOptions.Builder()         ...

  3. C++中的位域(bit-filed):一种节省空间的成员

    转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/16/90211.html 有一种被称为位域(bit-field) 的特殊的类数据成员,它可以被 ...

  4. 大暴力——[HAOI]2012音量调节

    题目:[HAOI]2012音量调节 描述: 问题描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里 ...

  5. linux下安装mysql-community后起不来

    wget http://repo.mysql.com/mysql-community-release-el6-5.noarch.rpmrpm -ivh http://repo.mysql.com/my ...

  6. ubuntu14.04 制作U盘启动文件

    1.制作U盘启动文件 网上搜索:U盘安装Ubuntu 12.10 图文教程(ultraiso) http://www.jb51.net/os/94398.html 2. 重启,按Del(或F2)进BI ...

  7. 用endsWith()来限制图片的后缀名

    var a=document.getElementById('file-name'); var filename=a.value if(!a.endsWith('.jpg')||!a.endsWith ...

  8. 用微信点单 订餐系统打造属于个人的O2O外卖订餐行业商业平台

    首先,我不能说我是一个成功的微信达人,我也不能说我是一个优秀的互联网专家.但我就眼下所使用的一套订餐系统来讲.正在逐渐的规划一个餐饮行业的商业圈! 我所使用的系统叫"微铺子订餐系统" ...

  9. TinyXml高速入门(一)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 对于xml文件,眼下我的工作仅仅是集中在配置文件和作为简单的信息文件来用,因此我不太喜欢使用msxml这样的重量级的x ...

  10. Java基础知识强化75:正则表达式之分割功能(字符串中的数字排序案例)

    1. 案例分析: 我有如下一个字符串:"91 27 46 38 50" 写代码实现最终输出结果是:"27 38 46 50 91" 分析:    (1)定义一个 ...