伪主动触发input:file的click事件
时间:2020-05-26
本文章向大家介绍伪主动触发input:file的click事件,主要包括伪主动触发input:file的click事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
背景
从前,input:file是不能主动触发click事件的,据说是安全方面的考虑。因此,在美化input:file的时候就麻烦了,最通用的方案是,制作一个经过美化后的<button>
,然后把input:file调整好尺寸,覆盖在<button>
上方,然后再设置 opacity: 0;
,如此一来,用户看到的是<button>
,点击的却其实是input:file。
html5允许在click事件的callback中主动出发input:file的click事件
考虑一下下面的HTML:
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>
为自定义的按钮绑定click事件:
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
如此一来,虽然input:file还是必要的,但就没必要说覆盖在<button>
上方,随便找个地方隐藏掉就好了,实在是方便了许多。
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12965270.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 六大原则不熟?那你学什么设计模式?来来来,赶紧来!
- 精品:TCP连接的建立和终止
- python--几种快速排序的实现以及运行时间比较
- TCP/IP详解 -奠基篇
- 段错误?打的就是段错误!!
- (Graph)图,挑着看看
- Mybatis学习笔记(四)调用存储过程
- 跟我一起 自己种一颗 AVL树(平衡二叉搜索树)吧!
- mybatis文件映射之利用collection定义关联集合(五)
- 【奇技淫巧】 -- 原地旋转数组
- mybatis文件映射之利用延迟加载解决collection分布查询(六)
- 【C++】攻克哈希表(unordered_map)
- 位图原理及实现 - 海量数据处理标配
- mybatis文件映射之利分布查询时传递多列值 (七)
- 位运算 - 初见