按钮上传文件:

 <input type="file" />

file的意思为提交

每个游览器的显示方式都不一样哦

遮罩层:   设两个id

<style type="text/css">
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;} </style>

body部分

 <input id="btnshow" type="button" value="Show" onclick="showdiv();" />
<div id="bg"></div>
<div id="show">测试
<input id="btnclose" type="button" value="Close" onclick="hidediv();" />

js部分

 <script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}
function hidediv() {
document.getElementById("bg").style.display = 'none';
document.getElementById("show").style.display = 'none';
}
</script>

效果图:

其中bg为遮罩层,设置透明度与隐藏

show为白色框子

HTML按钮实现!!!文件上传,遮罩层的更多相关文章

  1. 文件上传利器SWFUpload入门简易教程

    凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较A ...

  2. ABAP EXCEL 文件上传下载 用SMW0

    T-CODE: SMW0 在这里只介绍二进制数据,HTML模板的上传也一样. 另外也可以用CBO TABLE管理文件 可以看我另一个博文:CBO TABLE管理文件上传下载 选择 二进制 写包名: 进 ...

  3. yii2.0单文件上传和多文件上传

    yii2文件上传使用到yii2自带的文件上传类UploadFIle,以及对应的模型规则,这里分别介绍单文件上传和多文件上传: yii2单个文件上传: 上传步奏,先创建上传表单模型model(包含验证规 ...

  4. selenium2之文件上传

    我们在使用selenium做web自动化测试的时候也许会碰到需要上传文件或者图片的需求.那么下面给大家介绍一下,selenium是怎么实现文件上传和哪些情况不能直接上传. 一.上传控件标签为input ...

  5. Java文件上传细讲

    什么是文件上传? 文件上传就是把用户的信息保存起来. 为什么需要文件上传? 在用户注册的时候,可能需要用户提交照片.那么这张照片就应该要进行保存. 上传组件(工具) 为什么我们要使用上传工具? 为啥我 ...

  6. Python实现对百度云的文件上传

    环境准备 python3.6 PyCharm 2017.1.3 Windows环境 框架搭建 selenium3.6 安装方法: pip install selenium 实现步骤: 一.步骤分析 1 ...

  7. Selenium文件上传

    转自:https://www.cnblogs.com/miaojjblog/p/9679915.html Web上本地上传图片,弹出的框Selenium是无法识别的,也就是说,selenium本身没有 ...

  8. ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件

    前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...

  9. Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)

    在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...

  10. 完成FileUpload的文件上传功能,且可改按钮样式

    FileUpload控件: 更改按钮样式思路: 自己定义一个按钮,设置该按钮的样式,然后将FileUpload控件通过定位定在自己定义的按钮上面,设置z-index,使得控件浮在自己定义的按钮上面,记 ...

随机推荐

  1. Java中实现PHP中的urlencode与rawurlencode

    php手册中对urlencode这样说明 在java中 URLEncoder做了这样注释 也就是说java中对星号"*"是不进行编码的 也就是说URLEncoder之后还是&quo ...

  2. spring-aop学习

     SpringAOP学习 author:luojie 1.  AOP中的基本概念 AOP的通用术语,并非spring java所特有.很遗憾AOP的术语不是特别的直观.但如果让Spring java来 ...

  3. 在Windows上编译最新的CURL,含有zlib,openssl

    最近,从网上下载了一个curl库,使用时各种报错,都无法启动,于是干脆就直接自己编译了. 1. 准备工作 a. 下载zlib zlib可以使得HTTP请求支持gzip压缩,其地址如下: 官网:http ...

  4. 安卓奇葩问题之SQLite条件查找不到数据

    今天真是日了狗了. 先说需求:要做一个累死支付宝首页的可自定义的栏目.栏目是动态从后台获取的,所以就会有一个本地数据和后台数据的同步问题.为了方便对本地数据的增删改查,首先想到SQLite. 然后就写 ...

  5. winfrom调用FastReport模板

    '存放模板的路径 If Dir(Application.StartupPath & "\ReportsFile\HB\01\IN.frx", FileAttribute.N ...

  6. Hive使用技巧

    hive默认查询不会显示列名, 当一个表字段比较多的时候,往往看不出值与列之间的对应关系,对日常查错及定位问题带来不便,像下面这样. hive> >select * from exampl ...

  7. PROC SORT

    PROC SORT DATA=输入数据集 <OUT=输出数据集><选项>; BY 关键变量; RUN; PROC SORT 语法如上,其中在尖括号中的可以不出现,也不会报错. ...

  8. 解决VS2010子目录中的.cpp文件引用上一级目录的stdafx.h找不到定义的问题

    Source目录 |-- stdafx.h |--Util目录 |--Util.h |--Util.cpp 现在的发现Util.cpp各种变量的定义全是红色波浪线,找不到定义,但是却能够编译过 问题就 ...

  9. 关于“线程间操作无效: 从不是创建控件’textBox1‘的线程访问它”异常的解决方法

    线程间操作无效: 从不是创建控件“textBox1”的线程访问它 背景:通过一个辅助线程计算出的一个值赋给textBox1.text;解决办法:1.直接在窗体的构造函数中加:System.Window ...

  10. DECLARE_GLOBAL_DATA_PTR宏定义问题

    最近闲着顺便看了看6410的uboot代码,因为友善的boot对nand部分代码做了隐藏,所以干脆找了光盘里面三星原厂的uboot代码来看,因为友善的boot代码肯定也是基于厂商的代码改的,肯定可以的 ...