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 相关文章推荐
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
vue使用canvas实现移动端手写签名
Sep 22 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 验证码的实现代码
2011/07/17 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP多进程编程实例
2014/10/15 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python重新加载模块的实现方法
2018/10/16 Python
Python3常见函数range()用法详解
2019/12/30 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
应聘英语教师求职信
2014/04/24 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
社区健康教育工作方案
2014/06/03 职场文书
公司年终奖分配方案
2014/06/16 职场文书
农村文化活动总结
2014/08/28 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
2016新年慰问信范文
2015/03/25 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
老干部座谈会主持词
2015/07/03 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏