jQuery implementiert Datei-Upload mit Fortschrittsbalken (Code im Anhang)-js-Tutorial-php.cn

jQuery implementiert Datei-Upload mit Fortschrittsbalken (Code im Anhang)

php中世界最好的语言

Freigeben： 2018-04-23 14:21:34

Original

2291 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen jQuery zum Implementieren des Datei-Uploads mit Fortschrittsbalken (mit Code) Was sind die Vorsichtsmaßnahmen für jQuery zum Implementieren des Datei-Uploads mit Fortschrittsbalken? Ein praktischer Fall, werfen wir einen Blick darauf.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

CSS-Code:

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

Nach dem Login kopieren

jQuery-Code:

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren des Datei-Uploads mit Jquery+LigerUI

Wie man XML liest Dateiinhalt mit jQuery

Das obige ist der detaillierte Inhalt vonjQuery implementiert Datei-Upload mit Fortschrittsbalken (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!