Comment puis-je suivre la progression des opérations XMLHttpRequest, en particulier pour les téléchargements de fichiers volumineux ?

Surveillance de la progression de XMLHttpRequest : un guide complet

L'API XMLHttpRequest (XHR) standard ne prend pas en charge le suivi de la progression, ce qui entrave les efforts d'affichage des barres de progression lors des fichiers volumineux. téléchargements. Cependant, de nombreux navigateurs proposent des extensions non standard qui permettent de suivre la progression.

Octets téléchargés

Pour surveiller la progression des octets téléchargés, utilisez l'événement xhr.upload.onprogress . Le navigateur connaît à la fois la taille du fichier en cours de téléchargement et la quantité de données déjà transmises, ce qui permet de déterminer la progression du téléchargement.

Octets téléchargés

Détermination du la progression des octets téléchargés (lors de l'utilisation de xhr.responseText) est plus complexe car le navigateur n'a aucune connaissance préalable de la taille totale des données en cours de transfert. Une solution consiste à définir un en-tête Content-Length dans le script du serveur pour spécifier la taille totale en octets attendue.

Par exemple, si notre script serveur lit un fichier ZIP de 5 secondes, nous pouvons définir l'en-tête comme suit :

<code class="php">$filesize = filesize('test.zip');
header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;</code>

En définissant l'en-tête, le navigateur peut déterminer la longueur totale de la réponse et surveiller les octets reçus en conséquence.

Surveillance des événements

Pour surveiller la progression des téléchargements et des téléchargements, utilisez les écouteurs d'événements suivants :

<code class="javascript">// Event listener for upload progress
xhr.upload.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var uploadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};

// Event listener for download progress
xhr.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var downloadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};</code>

Exemple

Cet exemple illustre la surveillance de la progression lors d'un téléchargement de fichier à l'aide Barre de progression de jQuery UI :

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendRequest() {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.onloadstart = function() {
    updateProgress({ loaded: 0, total: 0 });
  };
  req.open('GET', 'test.php', true);
  req.send();
}

// Sending the request
sendRequest();</code>

En incorporant ces techniques, vous pouvez surveiller efficacement la progression des opérations XMLHttpRequest, permettant une expérience plus conviviale lors des transferts de fichiers volumineux.

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!