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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 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
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php实现的SESSION类
2014/12/02 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
python解析json实例方法
2013/11/19 Python
Python 性能优化技巧总结
2016/11/01 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python简易版停车管理系统
2019/08/12 Python
Django配置跨域并开发测试接口
2020/11/04 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
int和Integer有什么区别
2013/05/25 面试题
旅行社各个岗位职责
2014/03/15 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers