转自: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. 最短路--dijkstra+优先队列优化模板

    不写普通模板了,还是需要优先队列优化的昂 #include<stdio.h> //基本需要的头文件 #include<string.h> #include<queue&g ...

  2. 清华集训2016Day4

    清华集训2016Day4 组合数问题(problem) 用卢卡斯定理可知满足条件即将\(n\)和\(m\)分别用\(k\)进制表示,要求\(n\)的每一位都要大于等于\(m\)的对应位.直接数位\(d ...

  3. pycharm PYTHONPATH

    Hi brandenju! I believe os.chdir doesn't affect PYTHONPATH so changing your working directory at run ...

  4. ruby -检查json数据类型

    HashObj={","language"=>"zh","make"=>"Apple"," ...

  5. MOSFET 线路 12V 无法工作的问题（等待回复）

    问题: ˇ星空-北京:5V的时候,MOS管可以关断:12V的时候关不断: 初步判断在 Q4 上,先建议按以下方式测量数据. (Excel 文件) 等待回复. 参考链接:http://blog.51ct ...

  6. 上产使用MQ的三点注意

    安全性考量:在正式环境中使用消息队列中间件服务一定要做相关的安全性设置.包括启用消息队列服务的用户名和密码.启用消息队列服务自带的SSL加密设置.如果您使用的消息队列服务不自带SSL加密,则一定要自己 ...

  7. 【转】每天一个linux命令（9）：touch 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/10/30/2745714.html linux的touch命令不常用,一般在使用make的时候可能会用到 ...

  8. IE版本检测

    <html><body><script type="text/javascript">var browser=navigator.appName ...

  9. 打开安装 好的Microsoft Dynamics CRM 4.0 报错误为 Caller does not have enough privilege to set CallerOriginToken to the specified value 的解决办法

    If you installed CRM 4.0 on box where you also have SQL and used a domain account as service account ...

  10. codevs 1131 统计单词数

    #include<iostream> #include<string> using namespace std; int main() { string s, s0; getl ...