JS点击某个图标或按钮弹出文件选择框的实现代码


Posted in Javascript onSeptember 27, 2016

下面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下

具体代码如下所示:

<HTML> 
<head> 
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> 
<script type=‘text/javascript‘> 
function selectFile(){ 
//触发 文件选择的click事件 
$("#file").trigger("click"); 
//其他code如 alert($("#file").attr("value")) 
} 
/* 获取 文件的路径 ,用于测试*/ 
function getFilePath(){ 
alert($("#file").attr("value")); 
} 
</script> 
</head> 
<body> 
<!-- 给这个input 设置样式隐藏,切忌不可用display控制隐藏,可能不能跨浏览器 --> 
<input type="file" id="file" onchange="getFilePath()" 
style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/> 
<button onclick="selectFile();">select file</button> 
<button onclick="getFilePath()">get FilePath</button> 
</body> 
</html>

以上所述是小编给大家介绍的JS点击某个图标或按钮弹出文件选择框的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
微信小程序实现聊天室
Aug 21 Javascript
ReactNative页面跳转实例代码
Sep 27 #Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 #Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 #Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 #Javascript
jQuery实现图片轮播效果代码
Sep 27 #Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 #Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
python网络编程之文件下载实例分析
2015/05/20 Python
Python去除字符串两端空格的方法
2015/05/21 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python获取时间戳代码实例
2019/09/24 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
iPython pylab模式启动方式
2020/04/24 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
见习期自我鉴定
2014/01/31 职场文书
报告会主持词
2014/04/02 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
实名检举信范文
2015/03/02 职场文书
第二次离婚起诉书
2015/05/18 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
python turtle绘图命令及案例
2021/11/23 Python