转自: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. 字符串匹配--（K）MP模板

    大白书型模板,并没有写成函数形式: 这个是下标从0开始的: 此外,对于一个长度为 m 的串自匹配,在此模板中 m-p[m] 就是这个串的最小循环节长度(最后一个循环可以不完整) 另一个关于自匹配后的失 ...

  2. hdu5230

    bc41第三题: 由 1 - n-1 这 n-1 个数组成 l - c 到 r - c 闭区间内的数共有多少种组合方法: 据称本来应该也比较简单吧,xiaoxin说了个五边形数,然后纷纷找了五边形数的 ...

  3. 【socket编程】什么是socket编程

    Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的网络 ...

  4. 自己一下午练习Js的代码

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

  5. JVM(下)

    持久代:不会被 gc 给轻易回收的,创建后一直存在,持久代在堆内存里面,但是不归 java 程序使用.持久代是 动态 load 的那些 class,局部变量,去 gc 其实也 gc 不了啥 1.8 之 ...

  6. 网络基础 TCP/IP

    为了理解 HTTP,我们有必要事先了解一下 TCP/IP 协议族.通常使用的网络(包括互联网)是在 TCP/IP 协议族的基础上运作的.而 HTTP 属于它内部的一个子集.接下来,我们仅介绍理解 HT ...

  7. 性能计数器监控typeperf

    获取性能计数器名称列表: typeperf -qx 监控: typeperf.exe "\JetByte TCP Stats Perf Counters Service\IPv4: ESTA ...

  8. Action<T>和Func<T>委托

    Action<T>和Func<T>委托 泛型Action<T>委托和Func<T>委托是系统定义的两个泛型委托. Action<T>委托表示 ...

  9. ThinkJava-持有对象

    11.3 添加一组元素 在java.util包中的Arrays和Collection类中都有很多实用方讼,可以在一个Collection中添加 一组元素.Arrays.asList()方法接受一个数组 ...

  10. poj 3255 Roadblocks 次短路（两次dijksta）

    Roadblocks Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Total S ...