Maison > développement back-end > tutoriel php > 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
Libérer: 2024-11-11 15:46:02
original
221 Les gens l'ont consulté

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);
    }
  });
}
Copier après la connexion

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()]);
Copier après la connexion

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!

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