Comment suivre la progression du téléchargement dans XMLHttpRequest sans connaître la taille totale du fichier ?

Surveillance des progrès dans XMLHttpRequest

XMLHttpRequest (XHR) fournit un mécanisme pour effectuer des requêtes asynchrones à partir de JavaScript. Bien qu'il offre une prise en charge du suivi de la progression du téléchargement à l'aide de l'événement xhr.upload.onprogress, obtenir la progression des téléchargements n'est pas aussi simple en raison du manque d'informations sur le nombre total d'octets à recevoir.

Suivi de la progression du téléchargement.

Obtenir la progression du téléchargement est relativement simple. Le navigateur conserve des informations sur la taille du fichier en cours de téléchargement et la quantité de données transférées, ce qui permet de dériver la progression via l'événement xhr.upload.onprogress.

Surveillance de la progression du téléchargement

Pour les téléchargements, le défi vient de l'incapacité du navigateur à connaître la taille des données entrantes. Cependant, cela peut être surmonté en définissant un en-tête Content-Length dans la réponse du serveur, qui spécifie la taille totale des données à transférer.

Configuration côté serveur

Le côté serveur Le code responsable de la livraison du contenu doit définir l'en-tête Content-Length en fonction de la taille du fichier ou des données en cours de téléchargement. Exemple :

$filesize = filesize('test.zip');

header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;

Implémentation côté client

Avec l'en-tête Content-Length défini, le code côté client peut désormais suivre la progression du téléchargement :

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: Bytes received by the browser
    // evt.total: Total bytes defined by the header
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendreq(evt) {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.open('GET', 'test.php', true);
  req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
      // Callback actions here
    }
  };
  req.send();
}

Ce code crée une barre de progression à l'aide de la bibliothèque jQuery UI, affichant le pourcentage de progression au fur et à mesure de la réception des données. En tirant parti de l'en-tête Content-Length, le navigateur peut calculer et afficher avec précision la progression du téléchargement, ce qui le rend utile pour les téléchargements de fichiers volumineux pour lesquels un indicateur visuel de progression est souhaité.

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!