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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
js jquery做的图片连续滚动代码
Jan 06 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
js实现小时钟效果
Mar 25 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实现图片转换成ASCII码的方法
2015/04/03 PHP
初识PHP中的Swoole
2016/04/05 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
windows下python连接oracle数据库
2017/06/07 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python如何实现动态数组
2019/11/02 Python
用python对oracle进行简单性能测试
2020/12/05 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
2014年安全生产责任书
2014/07/22 职场文书
新教师培训心得体会
2014/09/02 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
小学生思想品德评语
2014/12/31 职场文书
房产公证书
2015/01/23 职场文书
慰问信范文
2015/02/14 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python