Comment implémenter la fonction de téléchargement de fichiers Ajax avec une barre de progression: Tutoriel PHP Exemple

1. Introduction

Dans les applications Web modernes, le téléchargement de fichiers est une exigence commune et le téléchargement de fichiers via AJAX peut fournir une expérience utilisateur plus fluide. Les utilisateurs peuvent terminer le téléchargement de fichiers sans rafraîchir la page et peuvent afficher les progrès de téléchargement en temps réel via la barre de progression pour éviter l'incertitude causée par un temps d'attente trop long.

2. Principe de mise en œuvre

Pour implémenter la fonction de téléchargement de fichiers AJAX avec une barre de progression, les étapes suivantes sont généralement requises:

2.1 Créer un formulaire de téléchargement

Tout d'abord, nous devons créer un formulaire HTML qui contient une fonction de téléchargement de fichiers. La fonction de téléchargement de fichiers est prise en charge en définissant l'EnCType du formulaire en "multipart / formulaire de forme".

 
  <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" id="file">
      <input type="submit" value="Télécharger">
  </form>
  

2.2 Envoyer des fichiers à l'aide de AJAX

Ensuite, nous utilisons Ajax pour soumettre des fichiers de manière asynchrone. Obtenez le fichier sélectionné par l'utilisateur via JavaScript, utilisez l'objet FormData pour créer des données de formulaire et envoyez les données au serveur via l'objet XMLHTTPRequest.

Voici un exemple du code JavaScript implémenté:

 
  var fileInput = document.getElementById("file");
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append("file", file);
  
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  
  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      console.log("Télécharger进度：" + percent + "%");
  });
  
  xhr.send(formData);
  

2.3 Traitement côté serveur

Le serveur doit recevoir et traiter les fichiers téléchargés. Dans PHP, vous pouvez utiliser le code suivant pour enregistrer le fichier téléchargé dans le répertoire spécifié du serveur.

 
  <?php
  $targetDir = "uploads/";
  $targetFile = $targetDir . basename($_FILES["file"]["name"]);
  
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
      echo "文件Télécharger成功！";
  } else {
      echo "文件Télécharger失败！";
  }
  ?>
  

3. Ajouter une barre de progression

Afin de permettre aux utilisateurs de voir clairement la progression du téléchargement de fichiers, nous pouvons utiliser l'événement de progression de XMLHTTPREQUEST en JavaScript pour écouter les progrès de téléchargement. Grâce à cet événement, nous pouvons mettre à jour l'état de la barre de progression dans la page frontale.

Voici le code pour mettre à jour la barre de progression:

 
  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      var progressBar = document.getElementById("progressBar");
      progressBar.style.width = percent + "%";
  });
  

Grâce au code ci-dessus, nous pouvons mettre à jour dynamiquement la largeur de la barre de progression pendant le processus de téléchargement, affichant ainsi les progrès de téléchargement en temps réel.

4. Résumé

Grâce aux étapes ci-dessus, nous avons réussi à implémenter une fonction de téléchargement de fichiers AJAX avec une barre de progression. Lorsque les utilisateurs téléchargent des fichiers, ils peuvent non seulement voir des progrès en temps réel, mais aussi profiter d'une expérience fluide. L'implémentation de cette fonction implique la technologie AJAX frontale et le traitement de téléchargement de fichiers PHP back-end. Avec ces étapes, vous pouvez facilement créer la fonction de téléchargement de fichiers avec une barre de progression.

Bien que le téléchargement de fichiers AJAX nécessite un travail collaboratif entre les extrémités avant et arrière, en comprenant la mise en œuvre spécifique de chaque étape, vous pouvez compléter avec succès le développement de fonctions connexes.