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静态的url如何传递
May 03 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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实现文件下载(支持中文文名)
2013/12/04 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
Prototype Date对象 学习
2009/07/12 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
ReactNative Image组件使用详解
2017/08/07 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python制作爬虫采集小说
2015/10/25 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
django框架中间件原理与用法详解
2019/12/10 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
大学老师推荐信
2014/02/25 职场文书
门市房租房协议书
2014/12/04 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
毕业生个人自荐书
2015/03/05 职场文书
生产车间管理制度
2015/08/04 职场文书
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL