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 UI皮肤定制
Jul 27 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
微信小程序实现点击页面出现文字
Sep 21 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python九九乘法表的实例
2017/09/26 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Python自带的IDE在哪里
2020/07/01 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
铭万公司.net面试题笔试题
2014/07/20 面试题
办公室文秘自我评价
2013/09/21 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
体育之星事迹材料
2014/05/11 职场文书
水利水电专业自荐信
2014/07/08 职场文书
商场促销活动总结
2014/07/10 职场文书
银行授权委托书范本
2014/10/04 职场文书
师德师风自查材料
2014/10/14 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
Python源码解析之List
2021/05/21 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript