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 ajax执行后台方法
Mar 18 Javascript
javascript倒计时效果实现
Nov 12 Javascript
js初始化验证实例详解
Nov 26 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue初尝试--项目结构(推荐)
Jan 30 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
回顾Javascript React基础
Jun 15 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 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
编译问题
2006/10/09 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
python类装饰器用法实例
2015/06/04 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
python中Apriori算法实现讲解
2017/12/10 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
土木工程师岗位职责
2013/11/24 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang