Maison > développement back-end > Problème PHP > Comment implémenter la barre de progression en php

Comment implémenter la barre de progression en php

PHPz
Libérer: 2023-04-19 10:36:09
original
1609 Les gens l'ont consulté

Avec le développement continu des applications Internet, le développement web est devenu un domaine très important. En tant que langage de script serveur couramment utilisé, PHP est largement utilisé dans le développement Web. Parmi elles, les opérations telles que le traitement de grandes quantités de données, le chargement et le téléchargement de fichiers nécessitent inévitablement l'utilisation de barres de progression, afin que les utilisateurs puissent ressentir la progression de l'opération de manière plus intuitive. Cet article présentera quelques méthodes et techniques d'implémentation des barres de progression en PHP pour aider les lecteurs à mieux appliquer cette fonction.

1. Implémentation AJAX de la barre de progression

Ajax est une technologie qui utilise la technologie JavaScript et XML pour la communication asynchrone. Elle peut mettre à jour une partie de la page sans actualiser la page entière. Les étapes spécifiques d'implémentation sont les suivantes :

  1. Ajoutez le code html de la barre de progression dans la page HTML, comme indiqué ci-dessous :
<div id="progressBar">
   <div id="progress"></div>
</div>
Copier après la connexion
Copier après la connexion
  1. Définissez la requête AJAX en Javascript, et transmettez les informations de progression au back-end code via une communication asynchrone. Voici un exemple simple :
function uploadFile() {
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e) {
        var percent = e.loaded / e.total * 100;
        document.getElementById('progress').style.width = percent + '%';
    }, false);
    xhr.open('POST', 'upload.php');
    xhr.send(formData);
}
Copier après la connexion
  1. Après avoir reçu les informations de progression, le code back-end effectue le traitement et les opérations correspondants et renvoie les résultats du traitement au front-end. Le code est le suivant :
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

echo "data: {$percent}%\n\n";
flush();
Copier après la connexion

Avec cette méthode, la progression de la barre de progression peut être affichée en temps réel sur la page lors du téléchargement ou du téléchargement de fichiers plus volumineux, afin que les utilisateurs puissent comprendre plus clairement l'état de l'opération.

2. Utilisez Session pour implémenter la barre de progression

Session est un mécanisme de stockage des informations de session utilisateur. Nous pouvons utiliser Session pour stocker les informations de progression et les transmettre à la page frontale en temps réel pour mettre à jour l'état de la barre de progression. Les étapes spécifiques de mise en œuvre sont les suivantes :

  1. Ajoutez le code html de la barre de progression dans la page HTML, comme indiqué ci-dessous :
<div id="progressBar">
   <div id="progress"></div>
</div>
Copier après la connexion
Copier après la connexion
  1. Traitez-le dans le code back-end et stockez les informations de progression dans la session. Voici un exemple simple :
session_start();
for ($i=0; $i<=100; $i++) {
    $_SESSION[&#39;progress&#39;] = $i;
    // 文件处理或上传下载等操作
}
Copier après la connexion
  1. Dans la page HTML, utilisez Javascript pour obtenir régulièrement des informations de progression du serveur et mettre à jour l'état de la barre de progression. Le code est le suivant :
setInterval(function() {
   var xhr = new XMLHttpRequest();
   xhr.open(&#39;GET&#39;, &#39;progress.php&#39;);
   xhr.onload = function() {
      var percent = parseInt(xhr.responseText);
      document.getElementById(&#39;progress&#39;).style.width = percent + &#39;%&#39;;
   };
   xhr.send(null);
}, 1000);
Copier après la connexion
  1. Côté serveur, répondez à la demande de la barre de progression frontale et renvoyez les informations de progression actuelles. Voici un exemple simple :
session_start();
if (isset($_SESSION[&#39;progress&#39;])) {
    echo $_SESSION[&#39;progress&#39;];
} else {
    echo "0";
}
Copier après la connexion

Cette méthode de mise en œuvre est très simple et peut très bien obtenir l'effet d'une barre de progression lorsque la quantité de données est faible. Cependant, il existe également certaines lacunes. Par exemple, dans des situations de concurrence élevée, cela peut entraîner un trop grand nombre de requêtes et affecter les performances du serveur. Dans ce cas, d'autres méthodes peuvent être envisagées pour implémenter la barre de progression.

3. Les bibliothèques tierces implémentent les barres de progression

De plus, il existe de nombreuses bibliothèques tierces qui peuvent être utilisées pour implémenter la fonction de barre de progression. Certaines de ces bibliothèques sont gratuites et open source, comme Bootstrap, jQuery, NProgress, etc. Leur utilisation peut grandement simplifier la difficulté d'écriture de code et améliorer l'efficacité du développement.

Par exemple, pour utiliser la bibliothèque Bootstrap pour implémenter une barre de progression, il vous suffit d'introduire les fichiers CSS et JS pertinents dans la page HTML, et de définir le code html de la barre de progression :

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      <span class="sr-only">60%Complete</span>
   </div>
</div>
Copier après la connexion

De cette façon, vous peut implémenter une barre de progression avec une barre d'effets dynamiques et modifier la valeur de l'attribut de style pour contrôler la progression de la barre de progression à tout moment.

Résumé

La barre de progression est une fonction Web couramment utilisée, qui joue un rôle important dans le traitement de grandes quantités de données, le téléchargement de fichiers, etc. Cet article présente trois méthodes d'implémentation des barres de progression en PHP : Ajax, Session et bibliothèques tierces. Chaque méthode a ses avantages et ses inconvénients, et vous pouvez choisir la méthode qui vous convient pour mettre en place la barre de progression. J'espère que cet article pourra aider les lecteurs à mieux appliquer la technologie PHP pour implémenter la fonction de barre de progression.

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal