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 全角转半角部分
Oct 28 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
jquery常用操作小结
Jul 21 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 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与SQL注入攻击[一]
2007/04/17 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
培养自己的php编码规范
2015/09/28 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
js闭包实例汇总
2014/11/09 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
Python list操作用法总结
2015/11/10 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python读取并写入mat文件的方法
2019/07/12 Python
Django 反向生成url实例详解
2019/07/30 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python列表返回重复数据的下标
2020/02/10 Python
在keras里实现自定义上采样层
2020/06/28 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python 爬虫请求模块requests详解
2020/12/04 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
给实习单位的感谢信
2014/02/01 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
党性分析自查总结
2014/10/14 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
给学校的建议书400字
2015/09/14 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL