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中Array 对象相关的几个方法
Dec 22 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
React Fragment介绍与使用详解
Nov 11 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python3 shelve模块的详解
2017/07/08 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python中的for循环
2018/09/28 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python做接口测试的必要性
2019/11/20 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
自学python用什么系统好
2020/06/23 Python
《火烧云》教学反思
2014/04/12 职场文书
文化建设工作方案
2014/05/12 职场文书
学习型班组申报材料
2014/05/31 职场文书
服务行业口号
2014/06/11 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
公司委托书格式范文
2014/10/09 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
学历证明样本
2015/06/16 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书