jQuery实现上传进度条效果

效果：（点击上传按钮）

See the Pen pjGNJr by moyu (@MoYu1991) on CodePen.

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>upload</title>
<link rel="stylesheet" type="text/css" href="upload/upload.css">
<script type="text/javascript" src="upload/jquery.js"></script>
</head>
<body>
<span class="upload-span">开始上传文件</span>
<div class="upload-mask"></div>
<div class="upload-component">
<div class="upload-close">
<span class="upload-close-span">关闭</span>
</div>
<div class="upload-content">
<div class="progress">
<span class="upload-text"></span>
<span class="uploaded"></span>
</div>
<div class="confirm-cancel">
<span class="confirm">确认</span>
<span class="cancel">取消</span>
</div>
</div>
</div>
<script type="text/javascript" src="upload/upload.js"></script>
</body>
</html>

CSS代码：

.upload-span{
display:inline-block;
width:120px;
height:40px;
color:#FFFFFF;
text-align: center;
line-height:40px;
background-color: blue;
border:2px solid blue;
border-radius:5px;
cursor: pointer;
letter-spacing:2px;
}
.upload-mask{
position: absolute;
top:0;
left:0;
z-index:9;
width:100%;
height:100%;
background-color: rgba(84,84,84,0.3);
display: none;
}
.upload-component{
position: absolute;
z-index:99;
top:50%;
left:50%;
margin-left:-120px;
margin-top:-60px;
width:240px;
height:120px;
background-color:#FFFFFF;
display:none;
}
.upload-close{
position: relative;
height:30px;
background-color: rgb(234,234,234);
}
.upload-close span{
position: absolute;
right:15px;
line-height:30px;
cursor: pointer;
}
.upload-content,.confirm-cancel{
margin-top:15px;
}
.progress{
position:relative;
width:90%;
height:22px;
margin-left:4.88888%;
text-align: center;
line-height:22px;
border:1px solid #ccc;
}
.upload-text{
position:absolute;
z-index:99999;
color:red;
}
.uploaded{
position:absolute;
left:0;
z-index:9999;
width:0%;
height:100%;
background-color: blue;
color:#FFFFFF;
}
.confirm-cancel span{
display:inline-block;
width:60px;
height:30px;
line-height:30px;
text-align: center;
background-color:#ccc;
cursor:wait;
}
.confirm{
margin-left:40%;
}
.cancel{
margin-left:10px;
}

jQuery代码：

$(function (){
var $uploadSpan = $('.upload-span');
var $uploadMask = $('.upload-mask');
var $uploadContent = $('.upload-component');
var $closeConfirmCancel = $('.upload-close-span,.confirm,.cancel');
var $uploadTextSpan = $('.upload-text');
function showMask(){
$(".upload-mask,.upload-component").css({display:'block'});
progressBar();
$uploadSpan.off('click',showMask);
}
function hiddenMask(){
$uploadMask.css({display:'none'});
$uploadSpan.on('click',showMask);
}
function closeConfirmCancel(){
$uploadContent.css({display:'none'});
$uploadTextSpan.text('').next().css({width:0});
hiddenMask();
}
// 模拟进度
function progressBar(){
var max =100;
var init =0;
var uploaded;
var test = setInterval(function(){
init +=5;
uploaded = parseInt(init / max *100)+'%';
$uploadTextSpan.text(uploaded).next().css({width:uploaded});
if(init ===100){
clearInterval(test);
$uploadTextSpan.text('上传完成');
$('.confirm-cancel span').css({cursor:'pointer'});
$('.confirm').css({backgroundColor:'rgb(111,197,293)'});
$('.cancel').css({backgroundColor:'rgb(175,194,211)'})
$closeConfirmCancel.on('click',closeConfirmCancel);
}
else{
$closeConfirmCancel.off('click',closeConfirmCancel);
$('.upload-close-span').on('click',function(){
clearInterval(test);
closeConfirmCancel();
});
}
},1000);
}
$uploadSpan.on('click',showMask);
})

jQuery实现上传进度条效果的更多相关文章

JS框架_(JQuery.js)上传进度条
百度云盘传送门密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
spring定时任务-文件上传进度条
spring定时任务导依赖  <dep ...
Java 单文件、多文件上传 / 实现上传进度条
博客地址:https://ainyi.com/76 日常,工作在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传实现:单文件上传.多文件上传(单选和多 ...
创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
iOS_文件上传进度条的实现思路-AFNettworking
iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...

随机推荐

_bzoj3224 Tyvj 1728 普通平衡树【Splay】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3224 保存splay模版一刻不停写了一个小时多一点,幸好一遍过了!(其实带着freopen ...
[ZPG TEST 109] 兔子跳跃【构图】
兔子跳跃 (jumping.pas/c/cpp) [问题描述] 兔子常常感到孤独,所以当他们决定出去走走,去见见他们的朋友,他们跳的很快. Iris正走在一条无限长的直线道路上.这条道路上点的编号.. ...
sqlserver 使用database mail 发送邮件
EXEC sp_send_dbmail @profile_name='dbmaster@zhidiansoft.net',@recipients='xxxxxxx@qq.com',@subject=' ...
Oracle报错："ORA-18008: 无法找到 OUTLN 方案 "的解决方案
Oracle报错:"ORA-18008: 无法找到 OUTLN 方案 "的解决方案今天连接到Oracle报错:ORA-18008: 无法找到 OUTLN 方案,前天还用得 ...
转 ORACLE-016：ora-01720 授权选项对于'xxxx'不存在
报错的情形如下, A用户:视图V_A B用户:视图V_B,并且用到了V_A C用户:需要用V_B, 授权过程, A用户下: grant select on V_A to B B用户下: grant s ...
lock to deteck in oracle
0,5,10 0-23 * * * /home/oracle/utility/blocker/detect_blocker.sh db 120 > /home/oracle/utility/tr ...
UML 用例图（转载）
UML是系统架构设计师考试的一个重要考点,需要考生掌握.但是有些考生,在学习的过程中会有这样的疑问,在敏捷开发时代,UML还有没有必要去学习? UML还是有用的,主要用在设计和分析阶段,但是UML不适 ...
191 Number of 1 Bits 位1的个数
编写一个函数,输入是一个无符号整数,返回的是它所有位1 的个数(也被称为汉明重量).例如,32位整数 '11' 的二进制表示为 00000000000000000000000000001011,所以 ...
Snort里的规则目录文件解读（图文详解）
不多说,直接上干货! snort的规则啊,是基于文本的,它通常存在于snort程序目录中或者子目录中,规则文件按照不同的组,进行分类存放的. snort的安装目录 [root@datatest sno ...
使用Jquery1.9 版本来实现全选
在使用Jquery实现全选以及反选的时候, 使用attr()实现的时候,在浏览器第一次运行可以全选,但是第二次再全选,不管用. 通过查找资料,用 prop()方法代替attr()方法就行了. 注意: ...

jQuery实现上传进度条效果

效果：（点击上传按钮）

html代码：

jQuery实现上传进度条效果的更多相关文章

随机推荐

热门专题