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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
shiro授权的实现原理
Sep 21 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
json字符串对象转换代码实例
Sep 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python中文件操作简明介绍
2015/04/13 Python
python调用百度语音识别api
2018/08/30 Python
python读取图片任意范围区域
2019/01/23 Python
python程序变成软件的实操方法
2019/06/24 Python
python通过实例讲解反射机制
2019/10/17 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
特色蛋糕店创业计划书
2014/01/28 职场文书
学习两会精神心得范文
2014/03/17 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
家长学校培训材料
2014/08/20 职场文书
体育运动会广播稿
2014/10/05 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
四风之害观后感
2015/06/09 职场文书
初中生物教学反思
2016/02/20 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android