HTML按钮实现!!!文件上传,遮罩层
按钮上传文件:
<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按钮实现!!!文件上传,遮罩层的更多相关文章
- 文件上传利器SWFUpload入门简易教程
凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较A ...
- ABAP EXCEL 文件上传下载 用SMW0
T-CODE: SMW0 在这里只介绍二进制数据,HTML模板的上传也一样. 另外也可以用CBO TABLE管理文件 可以看我另一个博文:CBO TABLE管理文件上传下载 选择 二进制 写包名: 进 ...
- yii2.0单文件上传和多文件上传
yii2文件上传使用到yii2自带的文件上传类UploadFIle,以及对应的模型规则,这里分别介绍单文件上传和多文件上传: yii2单个文件上传: 上传步奏,先创建上传表单模型model(包含验证规 ...
- selenium2之文件上传
我们在使用selenium做web自动化测试的时候也许会碰到需要上传文件或者图片的需求.那么下面给大家介绍一下,selenium是怎么实现文件上传和哪些情况不能直接上传. 一.上传控件标签为input ...
- Java文件上传细讲
什么是文件上传? 文件上传就是把用户的信息保存起来. 为什么需要文件上传? 在用户注册的时候,可能需要用户提交照片.那么这张照片就应该要进行保存. 上传组件(工具) 为什么我们要使用上传工具? 为啥我 ...
- Python实现对百度云的文件上传
环境准备 python3.6 PyCharm 2017.1.3 Windows环境 框架搭建 selenium3.6 安装方法: pip install selenium 实现步骤: 一.步骤分析 1 ...
- Selenium文件上传
转自:https://www.cnblogs.com/miaojjblog/p/9679915.html Web上本地上传图片,弹出的框Selenium是无法识别的,也就是说,selenium本身没有 ...
- ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...
- Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)
在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...
- 完成FileUpload的文件上传功能,且可改按钮样式
FileUpload控件: 更改按钮样式思路: 自己定义一个按钮,设置该按钮的样式,然后将FileUpload控件通过定位定在自己定义的按钮上面,设置z-index,使得控件浮在自己定义的按钮上面,记 ...
随机推荐
- esri联邦用户大会 总结
1 概述 1.1 文档概述 ESRI联邦用户大会已于2月25日到2月27日在美国华盛顿举行,现就其会议中设计到的内容总结如下: 1.2 景观分析 这是第一个demo,演示的是"景观分析&qu ...
- S2SH简介
struts2简介 Struts2是由WebWork基础上发展起来的,与struts1比较,选用struts2的理由是:①Struts1要求Action类继承一个抽象基类,而Struts 2 Acti ...
- centos 7安装配置bind
环境: 三台虚拟机,全部安装Centos 7, tony4.hadoop.com 192.168.31.223 tony5.hadoop.com 192.168.31.224 tony6.hadoop ...
- IT小喇叭-企业品牌宣传、产品营销推广的首选
IT小喇叭-企业品牌宣传.产品营销推广的首选 IT小喇叭,成立于2015年6月初,成都芮嘉科技有限公司旗下产品,主要进行媒体资源整合.宣传报道:使移动互联网等相关企业的产品宣传.品牌营销变得更加方便. ...
- 1.本周的作业请参照此文:http://www.ruanyifeng.com/blog/2015/12/git-workflow.html 制定本组项目的GitHub版本更新流程---答题者:徐潇瑞
首先,介绍一下gitflow,它是最早诞生.并得到广泛采用的一种工作流程.如果采用git flow开发流程,那么项目存在两个常设分支,一个叫主分支master,另一个叫开发分支develop.mast ...
- 部署额外域控制器,Active Directory
部署额外域控制器 转自:http://yuelei.blog.51cto.com/202879/117599 如果域中只有一台域控制器,一旦出现物理故障,我们即使可以从备份还原AD,也要付出停机等 ...
- 「2014-5-31」Z-Stack - Modification of Zigbee Device Object for better network access management
写一份赏心悦目的工程文档,是很困难的事情.若想写得完善,不仅得用对工具(use the right tools),注重文笔,还得投入大把时间,真心是一件难度颇高的事情.但,若是真写好了,也是善莫大焉: ...
- MongoDB学习笔记—02 MongoDB入门
Mongodb的基本概念 文档:是MongoDB中数据的基本单元,类似于关系型数据库中的行. 集合:多个文档组成一个集合,类似于关系型数据库中的表. 数据库:MongoDB的当个实例可以容纳多个独立的 ...
- 在RHEL6p5中设置网卡
前提: 在用ifconfig -a查看时已经显示出wlan0(无线网卡)的存在(即不用装驱动,驱动另记) 工具: 1.yum install wpasupplicant* 2.yum install ...
- NOSQL 数据库 CodernityDB
CodernityDB 是一个开源的纯 Python 实现的.无第三方依赖.支持多平台的 NoSQL 数据库. 关键特性: 纯 Python 开发 支持多索引 快速 (每秒将近10万的写入和超过10万 ...