编程 Javascript

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实现点击按钮弹出上传文件的窗口

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现点击按钮弹出上传文件的窗口

- Author -

一个弱者想变强

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

20个非常棒的Jquery实用工具国外文章

Jan 01 Javascript

JavaScript数据类型学习笔记

Jan 25 Javascript

详解JSON1：使用TSQL查询数据和更新JSON数据

Nov 21 Javascript

vue2.0开发实践总结之疑难篇

Dec 07 Javascript

Javascript操作dom对象之select全面解析

Apr 24 Javascript

JS按钮闪烁功能的实现代码

Jul 21 Javascript

JS实现将链接生成二维码并转为图片的方法

Mar 17 Javascript

Bootstrap 模态框自定义点击和关闭事件详解

Aug 10 Javascript

详解用JS添加和删除class类名

Mar 25 Javascript

json_decode 索引为数字时自动排序问题解决方法

Mar 28 Javascript

vue-以文件流-blob-的形式-下载-导出文件操作

Aug 07 Javascript

vue+node 实现视频在线播放的实例代码

Oct 19 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