recherche

Maison >interface Web >js tutoriel >jQuery implémente le téléchargement de fichiers avec barre de progression (code ci-joint)

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

php中世界最好的语言
php中世界最好的语言original
2018-04-23 14:21:342292parcourir

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>

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

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

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!

php jquery css xml
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des étapes pour implémenter le répertoire arborescent avec jqueryArticle suivant：Explication détaillée des étapes pour implémenter le répertoire arborescent avec jquery

Articles Liés

Voir plus