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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
javascript中this关键字详解
2016/12/12 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python正则分析nginx的访问日志
2017/01/17 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python列表与元组的异同详解
2019/07/02 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
python 表格打印代码实例解析
2019/10/12 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python实现文字版扫雷
2020/04/24 Python
python opencv实现图像配准与比较
2021/02/09 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
中药学自荐信
2014/06/15 职场文书
公司活动总结范文
2014/07/01 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书