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 相关文章推荐
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
JS实现简单的九宫格抽奖
Jun 28 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学习之PHP变量
2006/10/09 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP chop()函数讲解
2019/02/11 PHP
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
vue实现登录功能
2020/12/31 Vue.js
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python中spy++的使用超详细教程
2021/01/29 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
高中军训第一天感言
2014/03/06 职场文书
原材料检验岗位职责
2014/03/15 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
社区义诊通知
2015/04/24 职场文书
班级班风口号大全
2015/12/25 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
vue首次渲染全过程
2021/04/21 Vue.js
goland设置颜色和字体的操作
2021/05/05 Golang
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android