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中遭遇级联表达式陷阱
Mar 08 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
vue router 配置路由的方法
Jul 26 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python反射用法实例简析
2017/12/22 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
妇女儿童发展规划实施方案
2014/03/16 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
重阳节简报
2015/07/20 职场文书
高三教师工作总结2015
2015/07/21 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
介绍一下28个JS常用数组方法
2022/05/06 Javascript