javascript触发input-file的click事件
概述
- 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事件的更多相关文章
- 【JS】 伪主动触发input:file的click事件
大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种: 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的 ...
- 伪触发 input file 的click事件
前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- JQuery的click,trigger触发a标签的click事件无效的问题分析
今天在做一个手机端webAPP链接下载的时候,给a标签一个下载链接,但是通过 <a id="downFile" download="" href=&quo ...
- 给js创建的一个input数组绑定click事件
<html> <body> <input type="button" name="input[]" value="按钮1 ...
- 使用jquery trigger 触发a标签的click事件取代window.open方法
var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32&qu ...
- 移动端触发touchend后阻止click事件
// vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...
- 关于IOS浏览器:document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- click事件触发也有失灵的时候?
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- bootstrap 3 中表单元素的写法 ---- 重点是 input file 元素的
我们知道file元素,因为有许多的插件可以使用,往往我们不需要写样式,但是如果要求我们自己写样式(利用bootstrap 3)实现一个file极简样式如何写呢? 下面我们先来看看整个表单的样子! 重点 ...
随机推荐
- LD1-K(求差值最小的生成树)
题目链接 /* *题目大意: *一个简单图,n个点,m条边; *要求一颗生成树,使得其最大边与最小边的差值是所有生成树中最小的,输出最小的那个差值; *算法分析: *枚举最小边,用kruskal求生成 ...
- mongodb清洗数据
1,数据库连接超时:DBPool的连接时的配置: 自己进行设置: MongoClientOptions mco = new MongoClientOptions.Builder() ...
- C++中的位域(bit-filed):一种节省空间的成员
转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/16/90211.html 有一种被称为位域(bit-field) 的特殊的类数据成员,它可以被 ...
- 大暴力——[HAOI]2012音量调节
题目:[HAOI]2012音量调节 描述: 问题描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里 ...
- linux下安装mysql-community后起不来
wget http://repo.mysql.com/mysql-community-release-el6-5.noarch.rpmrpm -ivh http://repo.mysql.com/my ...
- ubuntu14.04 制作U盘启动文件
1.制作U盘启动文件 网上搜索:U盘安装Ubuntu 12.10 图文教程(ultraiso) http://www.jb51.net/os/94398.html 2. 重启,按Del(或F2)进BI ...
- 用endsWith()来限制图片的后缀名
var a=document.getElementById('file-name'); var filename=a.value if(!a.endsWith('.jpg')||!a.endsWith ...
- 用微信点单 订餐系统打造属于个人的O2O外卖订餐行业商业平台
首先,我不能说我是一个成功的微信达人,我也不能说我是一个优秀的互联网专家.但我就眼下所使用的一套订餐系统来讲.正在逐渐的规划一个餐饮行业的商业圈! 我所使用的系统叫"微铺子订餐系统" ...
- TinyXml高速入门(一)
作者:朱金灿 来源:http://blog.csdn.net/clever101 对于xml文件,眼下我的工作仅仅是集中在配置文件和作为简单的信息文件来用,因此我不太喜欢使用msxml这样的重量级的x ...
- Java基础知识强化75:正则表达式之分割功能(字符串中的数字排序案例)
1. 案例分析: 我有如下一个字符串:"91 27 46 38 50" 写代码实现最终输出结果是:"27 38 46 50 91" 分析: (1)定义一个 ...