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 相关文章推荐
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
js实现分割上传大文件
Mar 09 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
jQuery插件之validation插件
Mar 29 jQuery
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
JavaScript ES6的函数拓展
Jan 18 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
星际流派综述
2020/03/04 星际争霸
PHP+javascript液晶时钟
2006/10/09 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
js实现表格筛选功能
2017/01/18 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
浅析Python中yield关键词的作用与用法
2016/11/29 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
浅析Python函数式编程
2018/10/06 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python树的同构学习笔记
2019/09/14 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
毕业生自荐书
2014/02/03 职场文书
党员承诺书怎么写
2014/05/20 职场文书
小学开学标语
2014/07/01 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
幼儿园国培研修日志
2015/11/13 职场文书