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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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中的串行化变量和序列化对象
2006/09/05 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JS中parseInt()和map()用法分析
2016/12/16 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python实现购物车购物小程序
2018/04/18 Python
Python实现FM算法解析
2019/06/18 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python的历史与优缺点整理
2020/05/26 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
Java语言的优势
2015/01/10 面试题
物业经理求职自我评价
2013/09/22 职场文书
农民工讨薪标语
2014/06/26 职场文书
见义勇为事迹材料
2014/12/24 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
新课程改革心得体会
2016/01/22 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang