脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery文件上传进度条

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

 更新时间：2020年03月26日 08:57:51   作者：魔芋铃  
这篇文章主要为大家详细介绍了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实现文件上传进度条，能显示上传的百分比等信息，内容就到这里了，希望大家能够喜欢。

您可能感兴趣的文章:

相关文章

  • jQuery实现滑动星星评分效果(每日分享)

    jQuery实现滑动星星评分效果(每日分享)

    jQuery星星评分制作5颗星星鼠标滑过评分打分效果，可取消评分结果，重新打分。下面通过代码给大家讲解的非常详细，需要的的朋友参考下
    2019-11-11
  • jQuery表单验证功能实例

    jQuery表单验证功能实例

    这篇文章主要介绍了jQuery表单验证功能,涉及jquery针对表单项的读取与正则判定技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jQuery实现frame之间互通的方法

    jQuery实现frame之间互通的方法

    这篇文章主要介绍了jQuery实现frame之间互通的方法,结合实例形式分析了jQuery实现frame父子框架之间的调用操作实现方法,需要的朋友可以参考下
    2017-06-06
  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件iScroll实现下拉刷新，滚动翻页特效

    下拉自动加载进行分页的运用越来越多，比起传统的分页该方法分页用户体验更好，布局也更简单了。目前正在使用和学习中……
    2014-06-06
  • 基于jQuery的ajax方法封装

    基于jQuery的ajax方法封装

    AJAX 是一种用于创建快速动态网页的技术。这篇文章主要介绍了基于jQuery的ajax方法封装的相关资料,需要的朋友可以参考下
    2016-07-07
  • jQuery Tools tab使用介绍

    jQuery Tools tab使用介绍

    jQuery Tools tab使用介绍，需要的朋友可以参考下
    2012-07-07
  • jquery复选框CHECKBOX全选、反选

    jquery复选框CHECKBOX全选、反选

    在JQUERY官方站点看到了另一个方法.更加简单,给大家分享出来: 官方给的函数名为CheckboxGroup;顾名思义就是选取一组CHECKBOX.最新版是在6月18号发布的:
    2008-08-08
  • jQuery实现简单的按钮颜色变化

    jQuery实现简单的按钮颜色变化

    这篇文章主要为大家详细介绍了jQuery实现简单的按钮颜色变化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jquery退出each循环的写法

    jquery退出each循环的写法

    jquery如何退出each循环的? 在回调函数里return false即可，大多数jq的方法都是如此的
    2014-02-02
  • 自己动手开发jQuery插件教程

    自己动手开发jQuery插件教程

    首先要了解jQuery插件开发分两种，1.类级别的插件开发。2.对象级别插件开发。什么? 你居然问什么是类级别和什么是对象级别?
    2011-08-08

最新评论