Comment afficher la progression du téléchargement de fichiers AJAX dans un élément de progression ?

Comment afficher la progression du téléchargement d'un fichier AJAX dans un élément de progression

Lors du téléchargement d'un fichier via un script AJAX, vous pouvez rencontrer le besoin de afficher sa progression à l’utilisateur. Surtout lorsque le processus de téléchargement prend une période prolongée. Pour afficher efficacement cette progression, il est recommandé de mettre à jour l'élément HTML progress sur le frontend.

SOLUTION :

Pour ce faire, la propriété progress de la classe en cours d'exécution peut être utilisé. Cette propriété doit être régulièrement mise à jour pendant le processus de téléchargement, fournissant la progression actuelle sous forme de pourcentage (de 1 à 100). La méthode get_progress() peut également être utilisée pour récupérer cette progression.

Pour afficher la progression sur le frontend, il est important d'établir un mécanisme pour accéder à la propriété progress de la classe en cours d'exécution depuis le frontend. L'extrait de code suivant fournit un exemple de la façon dont cela peut être réalisé à l'aide de JavaScript :

function updateProgress() {
  // Send an AJAX request to retrieve the current progress from the PHP script
  $.ajax({
    url: "php/progress.php",
    success: function(response) {
      // Update the progress element with the received progress percentage
      $("#progress").val(response);
    }
  });
  
  // Recursively call this function to continuously update the progress
  setTimeout(updateProgress, 100);
}

$(document).ready(function() {
  updateProgress();
});

Dans ce code, la fonction updateProgress() envoie une requête AJAX au script PHP, qui renvoie la progression actuelle sous forme de réponse. La réponse est ensuite utilisée pour mettre à jour l'élément de progression avec l'ID "progress" sur le frontend. La fonction est également configurée pour être appelée de manière récursive toutes les 100 millisecondes pour mettre à jour en permanence la progression. Cela crée un affichage en temps réel de la progression du téléchargement pour l'utilisateur.

En implémentant cette solution, vous pouvez afficher efficacement la progression du téléchargement dans l'élément de progression du frontend. Cela améliore l'expérience utilisateur en fournissant un retour visuel sur l'état du processus de téléchargement.

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!