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 相关文章推荐
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
解决node修改后需频繁手动重启的问题
May 13 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
微信小程序上传图片实例
May 28 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 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.MVC的模板标签系统(五)
2006/09/05 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
php测试kafka项目示例
2020/02/06 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
Python help()函数用法详解
2014/03/11 Python
python flask 多对多表查询功能
2017/06/25 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python实现的桶排序算法示例
2017/11/29 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python socket聊天脚本代码实例
2020/01/02 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
2014年父亲节活动方案
2014/03/06 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
学生退学证明
2015/06/23 职场文书
投诉信回复范文
2015/07/03 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android