Maison  >  Article  >  développement back-end  >  Comment AJAX peut-il être utilisé pour afficher la progression en temps réel des téléchargements de fichiers ?

Comment AJAX peut-il être utilisé pour afficher la progression en temps réel des téléchargements de fichiers ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-11 15:46:02137parcourir

How can AJAX be used to display real-time progress for file uploads?

Barre de progression AJAX pour l'état de téléchargement de fichiers

Une tâche de téléchargement de fichier peut souvent impliquer un temps de traitement important, ce qui rend impératif de fournir à l'utilisateur avec des mises à jour de progrès. Un script AJAX peut remplir cette exigence en fournissant des informations de progression en temps réel.

Implémentation AJAX

Dans l'exemple fourni, la classe en cours d'exécution a une propriété $progress qui contient la progression du téléchargement (1-100) et une méthode get_progress() pour la récupérer. Pour afficher cette progression sur le front-end, AJAX peut être utilisé.

Voici une implémentation AJAX simplifiée :

function updateProgressBar() {
  // Make an AJAX call to the PHP script
  $.ajax({
    url: "upload_status.php",
    success: function(data) {
      // Update the progress bar with the returned value
      $("#progress").val(data);
    }
  });
}

Cette fonction interroge périodiquement le script PHP pour récupérer la progression actuelle et met à jour le barre de progression en conséquence.

Dans le script PHP, upload_status.php, vous pouvez obtenir la valeur de progression en utilisant la méthode $executing_class->get_progress() et la renvoyer sous forme de réponse JSON :

<?php
header('Content-Type: application/json');
echo json_encode(['progress' => $executing_class->get_progress()]);

En appelant périodiquement updateProgressBar() à l'aide d'une minuterie, vous pouvez afficher en continu la progression à l'utilisateur.

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!

Déclaration:
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