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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
js实现圆盘记速表
Aug 03 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
node.js文件上传处理示例
Oct 27 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
小程序实现录音上传功能
Nov 22 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
2014年人事科工作总结
2014/11/19 职场文书
组织生活会发言材料
2014/12/15 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
法定授权委托证明书
2015/06/18 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
创业计划书之养殖业
2019/10/11 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL