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 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
js date 格式化
Feb 15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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输出xml格式字符串(用的这个)
2012/07/12 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
详解Python中break语句的用法
2015/05/14 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
super()与this()的区别
2016/01/17 面试题
新春文艺演出主持词
2014/03/27 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
加强作风建设工作总结
2014/10/23 职场文书
安全生产工作汇报
2014/10/28 职场文书
学生检讨书如何写
2014/10/30 职场文书
小学中等生评语
2014/12/29 职场文书
监考失职检讨书
2015/01/26 职场文书
小学感恩主题班会
2015/08/12 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL