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

前端技术 2023/09/06 JavaScript

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

本文地址：https://www.stayed.cn/item/15601

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案