jQuery实现简单的文件上传进度条效果


Posted in Javascript onMarch 26, 2020

本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下:

运行效果截图如下:

jQuery实现简单的文件上传进度条效果

具体代码如下:

<!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实现文件上传进度条,能显示上传的百分比等信息,内容就到这里了,希望大家能够喜欢。

Javascript 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
jquery实现手风琴效果
Nov 20 #Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 #Javascript
jquery背景跟随鼠标滑动导航
Nov 20 #Javascript
JavaScript获取浏览器信息的方法
Nov 20 #Javascript
JavaScript性能优化之小知识总结
Nov 20 #Javascript
Bootstrap每天必学之基础排版
Nov 20 #Javascript
详解JavaScript的回调函数
Nov 20 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python数据分析:关键字提取方式
2020/02/24 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
规范化管理年活动总结
2014/08/29 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
MySQL约束超详解
2021/09/04 MySQL