jQuery implémente la barre de progression du téléchargement de fichiers effets spéciaux_jquery

La barre de progression du téléchargement est généralement implémentée en ajoutant un script back-end à jquery. Aujourd'hui, nous présentons un exemple de jQuery php de base qui implémente l'effet de barre de progression du téléchargement de fichiers. Les détails spécifiques sont les suivants.

Récemment, l'effet de créer une barre de progression pour un projet est apparu. Cela n'a jamais été fait auparavant. Je n’ai tout simplement pas grand-chose cette semaine, je vais donc l’utiliser pour reconstituer mon inventaire.

Pour télécharger des fichiers, vous devez d'abord préparer un "bouton" :

Cela a l'air bien, et la mise en œuvre est très simple :

<span class="upload-span">开始上传文件</span>
<button>太丑了，就用span来做了，可控性强。添加点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;
}

Lorsque vous cliquez dessus, l'effet de téléchargement sera déclenché, puis l'événement sera ajouté.
Pour le rendre plus réaliste, vous devez ajouter un masque et un contrôle pour afficher la barre de progression. Après avoir cliqué sur span, l'effet ressemblera à ceci :

.

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

Ajoutez du CSS :

.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;
  /*background-color: blue;*/
  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;
  /*cursor:pointer;*/
  background-color:#ccc;
  cursor:wait;
}
.confirm{
  /*background-color: rgb(111,197,293);*/
  margin-left:40%;
}
.cancel{
  /*background-color: rgb(175,194,211);*/
  margin-left: 10px;
}

Afin de simuler l'affichage de la progression, deux spans sont utilisés ici :

<div class="progress">
  <span class="upload-text"></span>
  <span class="uploaded"></span>
</div>

Celui du haut sert à afficher les pourcentages, et celui du bas sert à remplir les couleurs :

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

Pour être réaliste, définissez la couleur d'arrière-plan de la plage colorée, et sa largeur est le pourcentage de progression. Enfin, utilisez js pour simuler le changement de progression :

  // 模拟进度
  function progressBar() {
    var max = 100;
    var init = 0;
    var uploaded;
    var test = setInterval(function() {
      init += 10;
      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();
  });
  $uploadMask.on('click',function() {
          clearInterval(test);
          closeConfirmCancel();
        })
      }
    },1000);
  }

JQuery implémente une barre de progression du téléchargement de fichiers, qui peut afficher le pourcentage de téléchargement et d'autres informations. J'espère que vous l'aimerez tous.