js实现点击按钮弹出上传文件的窗口


Posted in Javascript onDecember 23, 2016

1.详细描述

在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件。

2.代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script type="text/javascript">
function F_Open_dialog() 
{ 
document.getElementById("btn_file").click(); 
}
</script>
</head>
<body>
<div>
<input type="file" id="btn_file" style="display:none">
<button type="button" onclick="F_Open_dialog()">选择文件</button>
</div>
</body>
</html>

3.操作示例

将代码复制到W3CSchool的测试页面,提交运行之后如图:在查看结果页面会出现“选择文件”这个按钮

js实现点击按钮弹出上传文件的窗口

之后点击“选择文件”后如图:页面上会出现弹窗,显示本地磁盘信息,用于选择文件。

js实现点击按钮弹出上传文件的窗口

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 #Javascript
JS中微信小程序自定义底部弹出框
Dec 22 #Javascript
Bootstrap源码解读表单(2)
Dec 22 #Javascript
javascript学习之json入门
Dec 22 #Javascript
Bootstrap源码解读网格系统(3)
Dec 22 #Javascript
js微信支付实现代码
Dec 22 #Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 #Javascript
You might like
php截取后台登陆密码的代码
2012/05/05 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
Javascript复制实例详解
2016/01/28 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
python计算N天之后日期的方法
2015/03/31 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
行政部总经理岗位职责
2014/01/04 职场文书
师德演讲稿范文
2014/05/06 职场文书
应届生找工作求职信
2014/06/24 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
推广活动策划方案
2014/08/23 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
医院员工辞职信范文
2015/05/12 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers