Comment afficher l'état de progression du téléchargement de fichiers AJAX ?

Afficher l'état de progression du téléchargement de fichiers AJAX

Pour améliorer l'expérience utilisateur lors de téléchargements prolongés de fichiers AJAX, les utilisateurs souhaitent souvent un moyen de suivre le téléchargement progrès. Ceci peut être réalisé en exploitant l'élément de progression avec des mises à jour en temps réel.

Au niveau du backend, de nombreux modèles de programmation comportent des mesures de suivi des progrès stockées dans les propriétés. Dans ce cas, une propriété appelée $progress est mise à jour avec la progression du téléchargement de 1 à 100. De plus, la même classe propose une méthode get_progress() qui récupère la progression mise à jour.

Pour utiliser ces informations de progression dans le front-end pour mettre à jour l'élément de progression, une solution est nécessaire pour combler le fossé. De nombreuses approches sont disponibles, mais une méthode simple consiste à appeler périodiquement une requête AJAX depuis le front-end qui interroge la valeur de la propriété $progress.

Le code ci-dessous illustre cette technique :

var progress = 0;

setInterval(function() {
    $.ajax({
        url: "get_progress.php",
        method: "GET",
        success: function(response) {
            progress = response;
            updateProgressBar(progress);
        }
    });
}, 1000);

function updateProgressBar(progress) {
    $("#progress-element").val(progress);
}

Notez que cette approche s'appuie sur un script PHP supplémentaire, get_progress.php, qui renvoie la valeur stockée dans la propriété $progress.

<?php
include "class.php";

$object = new MyClass();
echo $object->get_progress();
?>

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!