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

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

WBOY

Libérer： 2016-05-16 15:45:31

original

1724 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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.