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 相关文章推荐
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
简单实现JS计算器功能
Dec 21 Javascript
React组件的三种写法总结
Jan 12 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 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
杏林同学录(四)
2006/10/09 PHP
php类中private属性继承问题分析
2012/11/01 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
JavaScript 基础问答三
2008/12/03 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
JS验证字符串功能
2017/02/22 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
解决python flask中config配置管理的问题
2019/07/26 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
会计工作心得体会
2014/01/13 职场文书
《锄禾》教学反思
2014/04/08 职场文书
一年级学生期末评语
2014/04/21 职场文书
2014年保洁工作总结
2014/11/24 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
加强党性修养心得体会
2016/01/21 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS