转自: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. JQuery禁止回车提交表单

    //禁止回车键提交表单——动态绑定 $(function(){ $("input").on('keypress',  //所有input标签回车无效,当然,可以根据需求自定义 fu ...

  2. 用newLISP通过SMTPserver发送邮件

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/sheismylife/article/details/26633073 直接使用标准模块smtpx. ...

  3. Jmeter 在linux下的分布式压测

    Jmeter 在linux下的分布式压测 0.将 windows机器作为master 控制机(同时也兼做负载机slave), linux机器作为 负载机 slave. 1.linux环境安装 : (1 ...

  4. Angular 4 组件间的通信

    一.输入属性(父组件与子组件通信) 1. 创建工程 ng new demo1 2.创建order组件 ng g component order 3. 在order组件里定义输入属性 order组件的h ...

  5. import和export语法报错

    “最近在学习ES6”,但是在chrome中新建了js通过ES6语法(import,export)无法引入外部JS,报错: Uncaught SyntaxError:Unexpected token { ...

  6. Microsoft Dynamics CRM 2011 Plugin中PluginExecutionContext.InputParameters["Target"]中的Target是从哪来的？

    图 1 如图1,CRM编程是一个请求响应模型,任何操作都是通过一个Request发起,一个Response返回结果,这个模型简单实用.所有请求类都是继承OrganizationRequest,所有响应 ...

  7. 【python】实例-创建文件并通过键盘输入字符

    import os lnend=os.linesep ##windows行结束符号是“\r\n” FileName=raw_input("please input filename:&quo ...

  8. dede的织梦问答模块也可以支持arclist标签

    dedecms织梦问答等模块支持arclist标签,实现随机调用其他栏目文章 就是让模块模板文件支持调用主站的模板,因为调用主站下的/templets/default/模板,也就实现了支持调用所有标签 ...

  9. RabbitMQ-2 工作队列

    参考:http://rabbitmq.mr-ping.com/ 工作队列 (使用pika 0.9.5 Python客户端) 在第一篇教程中,我们已经写了一个从已知队列中发送和获取消息的程序.在这篇教程 ...

  10. 杂项-性能测试工具：LoadRunner

    ylbtech-杂项-性能测试工具:LoadRunner LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadR ...