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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
微信开发 微信授权详解
Oct 21 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Node.js搭建小程序后台服务
Jan 03 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 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分页函数
2006/10/09 PHP
php横向重复区域显示二法
2008/09/25 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
React中的render何时执行过程
2018/04/13 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python requests.get带header
2020/05/05 Python
详解Python高阶函数
2020/08/15 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
物流管理应届生求职信
2013/11/07 职场文书
产品质量承诺书
2014/03/27 职场文书
2019思想汇报范文
2019/05/21 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js