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 相关文章推荐
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
Three.js基础部分学习
Jan 08 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
js实现无缝轮播图特效
May 09 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 魔术函数使用说明
2010/05/14 PHP
php 高性能书写
2010/12/11 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
Python爬取三国演义的实现方法
2016/09/12 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python SQLite3简介
2018/02/22 Python
基于python实现简单日历
2018/07/28 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
计算机求职信
2013/12/01 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
社会学专业求职信
2014/07/17 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
财务经理岗位职责
2015/01/31 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书