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 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 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 parse_url 一个好用的函数
2009/10/03 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
体育专业学生自我评价范文
2014/01/17 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python