转自:https://www.jb51.net/article/100916.htm

1.详细描述

在页面上设置一个“选择文件”按钮，点击该按钮，会弹出本地磁盘信息用于选择文件。

2.代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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实现点击按钮弹出上传文件的窗口的更多相关文章

  1. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  2. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  3. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  4. Html ： 点击按钮弹出输入框，再次点击进行隐藏

    上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  7. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  8. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  9. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

随机推荐

  1. Python之进程（multiprocessing）

    一.multiprocessing模块简介——进程基于“threading”的接口 multiprocessing模块支持创建进程——使用threading模块相似的API.multiprocessi ...

  2. nexus && minio s3 存储私有镜像

    对于新版本的nexus 已经支持s3 存储了(3.12),但是企业内部可能还是需要使用私有部署的 还好我们有minio,具体的介绍就不说了 minio 项目运行 参考项目: https://githu ...

  3. adnanh webhook 框架request values 说明

      request values 在adnanh webhook 是比较重要的,规则触发以及命令参数传递都是通过它 支持的request values 类似 http header 查询参数 play ...

  4. dgraph 基本查询语法 一

    dgraph 的查询语法是在graphql 上的扩展,添加了新的支持,同时官方提供了一个 学习的网站 https://tour.dgraph.io/ 基本环境(cluster 模式的) 参考 gith ...

  5. FP-growth算法发现频繁项集（一）——构建FP树

    常见的挖掘频繁项集算法有两类,一类是Apriori算法,另一类是FP-growth.Apriori通过不断的构造候选集.筛选候选集挖掘出频繁项集,需要多次扫描原始数据,当原始数据较大时,磁盘I/O次数 ...

  6. 管理node.js版本的模块：n

    n模块的使用: 命令 作用 yarn global add n 全局安装n n stable 升级node.js到最新稳定版 n v0.10.26 或 n 0.10.26 升级到指定版本号

  7. 设置zedgraph鼠标拖拽和局部放大属性(转帖)

    说一下几个属性的意义和具体应用: (1)鼠标拖拽显示区域 PanModifierKeys ->> Gets or sets a value that determines which mo ...

  8. POJ1050最大子矩阵面积

    题目:http://poj.org/problem?id=1050 自己用了n^4的像暴搜一样的方法,感到有点奇怪——真的是这样? #include<iostream> #include& ...

  9. 【ActiveMQ入门-10】ActiveMQ学习-通配符+异步接收

    通配符介绍: 一般情况下,我们使用层次结构的方式来组织队列,比如A.B.C.D,这样便于归类和管理.  我们也可以使用通配符来配置或是操作多个队列.  通配符有三个: .  用来分隔路径: * 用来匹 ...

  10. Python网络爬虫-xpath模块

    一.正解解析 单字符: . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [0-9] \D : 非数字 \w :数字.字母.下划线.中文 \W : 非\ ...