简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > développement back-end > tutoriel php > le corps du texte

Interprétation détaillée de la barre de progression du téléchargement php (recommandé)

墨辰丷
Libérer： 2023-03-29 21:42:01
original
2392 Les gens l'ont consulté

Cet article présente principalement l'interprétation détaillée de la barre de progression du téléchargement PHP (recommandé. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Trois solutions pour télécharger des fichiers sur le Web Partager avec tout le monde :

Ce que je souhaite utiliser ici, c'est le méthode de formulaire . En définissant l'attribut enctype="multipart/form-data" pour l'élément de formulaire, les données soumises par le formulaire sont soumises en codage binaire et le contenu du fichier téléchargé peut être obtenu en utilisant le flux binaire pour obtenir le contenu dans le servlet qui reçoit cette demande. Cela permet le téléchargement de fichiers.

L'attribut enctype de l'élément form spécifie la méthode d'encodage des données du formulaire :

J'ai trouvé deux méthodes sur Internet. . PHP coopère avec apc pour l'implémenter et utilise uploadprogress pour l'implémenter. Cette fois, je veux utiliser uploadprogress Cliquez sur l'adresse pour télécharger la dll de la version correspondante de php. Installez l'extension php_uploadprogress.dll et redémarrez Apache.

Principe d'implémentation de la barre de progression :

Une méthode iframe de téléchargement de fichiers sans actualisation est utilisée ici.

L'image une fois le téléchargement terminé : 

<body>
  <p style="padding:20px">
   <form action="action.php" enctype="multipart/form-data" method="post" target="iframeUpload">
    <iframe name="iframeUpload" width="400" height="400" frameborder=&#39;1&#39;></iframe>
    <input type="hidden" name="UPLOAD_IDENTIFIER" value="1" />
    <input id="file1" name="file1" type="file"/> 
    <input value="上传" type="submit" onclick="startProgress()"/> 
   </form>
  </p>
  <p style="width: 500px; height: 20px;border:1px solid red"> 
   <p style="position: relative; height: 20px; background-color: purple; width: 0%;" class="barinner"></p>
  </p>
  <p id=&#39;showNum&#39;></p>
  <p class="prbar">
   <p class="prpos barinner"></p>
  </p>
 </body>
Copier après la connexion

Dans le code HTML ci-dessus, veuillez faire attention à UPLOAD_IDENTIFIER Ceci est utilisé pour localiser lequel. fichier pour voir la progression du téléchargement. Je vais l'écrire sous la forme d'un 1 ici, mais vous pouvez l'écrire sous la forme d'un nombre aléatoire généré par PHP. Voici le script JS : 

 var proNum=0; 
  var loop=0; 
  var progressResult = ""; 
  var interval; 
  function sendURL() { 
   $.ajax({ 
    type : &#39;GET&#39;, 
    url : "getprogress.php", 
    async : true, 
    cache : false, 
    dataType : &#39;json&#39;,
    data: "progress_key=" + $(&#39;input[name=UPLOAD_IDENTIFIER]&#39;).val(),
    success : function(e) { 
     proNum=parseInt(e); 
     if(e){ 
      $(&#39;.barinner&#39;).css(&#39;width&#39;, proNum+"%");
      $(&#39;#showNum&#39;).html(proNum+"%");
      setTimeout("getProgress()", 200); 
   
     }else{ 
      if(interval == 1){ 
       $(&#39;.barinner&#39;).css(&#39;width&#39;, "100%");
       $(&#39;#showNum&#39;).html("100%");
      } 
     }
    } 
   }); 
  } 
  function getProgress(){ 
   loop++; 
   sendURL(); 
  } 
  function startProgress(){ 
   interval = 1;
   $(&#39;.barinner&#39;).css(&#39;width&#39;, proNum+"%"); 
   $(&#39;#showNum&#39;).html(proNum+"%");
  setTimeout("getProgress()", 500); 
  }
Copier après la connexion

Voici le contenu du fichier getprogress.php : 

 <?php 
 if (function_exists("uploadprogress_get_info")) {
  $info = uploadprogress_get_info($_GET[&#39;progress_key&#39;]);
  if(!empty($info)){
   if(($info[&#39;bytes_uploaded&#39;] < $info[&#39;bytes_total&#39;]) && !empty($info[&#39;bytes_uploaded&#39;]) && !empty($info[&#39;bytes_total&#39;])){
    $proNum = floor(($info[&#39;bytes_uploaded&#39;]/$info[&#39;bytes_total&#39;])*100);  
   }else{
    $proNum = 100;
   }
   echo $proNum;
  }else{
   echo 0;
  }
 }
Copier après la connexion

Une fois le téléchargement terminé, j'affiche le CSS des deux barres de progression, la seconde Le type est écrit en utilisant le dernier CSS3. Certaines propriétés d'animation CSS3 sont utilisées. 

 .prbar {
  margin:5px;
  width:500px;
  background-color:#dddddd;
  overflow:hidden;
  
  /* 边框效果 */
  border: 1px solid #bbbbbb;
  -moz-border-radius: 15px;
  border-radius: 15px;
    
  /* 为进度条增加阴影效果 */
  -webkit-box-shadow: 0px 2px 4px #555555;
  -moz-box-shadow: 0px 2px 4px #555555;
  box-shadow: 0px 2px 4px #555555;   
 }
 /* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
 doesnotexist:-o-prefocus, .prbar {
 border-radius:0px;
 }
 .prpos {
  width:0%;
  height:30px;
  background-color:#3399ff;
  border-right:1px solid #bbbbbb;
  /* CSS3 进度条渐变 */
  transition: width 2s ease;
  -webkit-transition: width 0s ease;
  -o-transition: width 0s ease;
  -moz-transition: width 0s ease;
  -ms-transition: width 0s ease;
  /* CSS3 Stripes */
  background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
  background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-size: 40px 40px;
  /* Background stripes animation */
  animation: bganim 3s linear 2s infinite;
  -moz-animation: bganim 3s linear 2s infinite;
  -webkit-animation: bganim 3s linear 2s infinite;
  -o-animation: bganim 3s linear 2s infinite;
  -ms-animation: bganim 3s linear 2s infinite;
 }
 @keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-moz-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-webkit-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-o-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-ms-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
Copier après la connexion

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

php Explication détaillée de l'exemple de code de formatage des données d'arbre de classification infinie

Interface du système d'authentification unique SSO implémentée par php Analyse d'exemples fonctionnels

Explication détaillée des exemples de fonctions de robot d'exploration multithread de pool de threads implémentés par PHP et python

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!

Étiquettes associées：
php上传进度条 php上传文件进度条 php实现进度条 php上传图片进度条 jquery上传进度条
source：php.cn
Article précédent：PHP exploite les dates et les chaînes pour calculer avec précision l'âge Article suivant：Collection complète de fonctions de traitement d'images PHP
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Comment combler l'écart entre l'image et la barre de progression sur un grand écran à l'aide du système Bootstrap Grid ? Laissez-moi d'abord vous montrer l'idée de​​cette image : Image (1) Sur cette image, nous ...
Depuis 2023-09-14 10:56:03
0
1
335
Renommer séquentiellement les fichiers lors du téléchargement en fonction des fichiers existants dans le répertoire J'utilise ce code de téléchargement (php) que j'ai trouvé en ligne pour un formulaire de t...
Depuis 2023-09-10 13:14:12
0
1
310
Comment accéder aux propriétés dans PHP ? Poursuivez sur la base de ce document : https://www.php.net/manual/en/langage.oop5.referen...
Depuis 2023-09-05 18:50:40
0
1
243
Comment actualiser le jeton d'accès de l'API Dropbox en PHP sans vous connecter J'utilise https://github.com/kunalvarma05/dropbox-php-sdk pour télécharger des fichiers su...
Depuis 2023-08-26 11:28:49
0
2
272
Comment transmettre des variables et des données PHP à JavaScript J'ai une variable en PHP et je dois utiliser sa valeur dans mon code JavaScript. Comment p...
Depuis 2023-08-21 12:31:08
0
2
179
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！