jQuery implémente le téléchargement de fichiers avec barre de progression (code ci-joint)-js tutoriel-php.cn

jQuery implémente le téléchargement de fichiers avec barre de progression (code ci-joint)

php中世界最好的语言

Libérer： 2018-04-23 14:21:34

original

2255 Les gens l'ont consulté

Cette fois, je vous propose jQuery pour implémenter le téléchargement de fichiers avec barre de progression (avec code). Quelles sont les précautions pour que jQuery implémente le téléchargement de fichiers avec barre de progression ? un cas pratique, jetons un oeil.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!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>
<p class="upload-mask"></p>
<p class="upload-component">
<p class="upload-close">
<span class="upload-close-span">关闭</span>
</p>
<p class="upload-content">
<p class="progress">
<span class="upload-text"></span>
<span class="uploaded"></span>
</p>
<p class="confirm-cancel">
<span class="confirm">确认</span>
<span class="cancel">取消</span>
</p>
</p>
</p>
<script type="text/javascript" src="upload/upload.js"></script>
</body>
</html>

Copier après la connexion

Code 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;
}

Copier après la connexion

Code 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);
})

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le téléchargement de fichiers avec Jquery+LigerUI

Comment lire XML contenu du fichier avec jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!