So implementieren Sie die AJAX -Datei -Upload -Funktion mit Fortschrittsleiste: PHP -Beispiel -Tutorial

1. Einführung

In modernen Webanwendungen ist das Hochladen von Dateien eine übliche Anforderung, und das Hochladen von Dateien über AJAX kann eine reibungslosere Benutzererfahrung liefern. Benutzer können das Datei -Hochladen abschließen, ohne die Seite zu aktualisieren, und können den Fortschritt des Uploads in Echtzeit über die Fortschrittsleiste anzeigen, um die durch zu lange Wartezeit verursachte Unsicherheit zu vermeiden.

2. Implementierungsprinzip

So implementieren Sie die AJAX -Datei -Upload -Funktion mit einer Fortschrittsleiste, sind in der Regel die folgenden Schritte erforderlich:

2.1 Erstellen Sie ein Upload -Formular

Zunächst müssen wir ein HTML -Formular erstellen, das die Datei -Upload -Funktion enthält. Die Datei-Upload-Funktion wird unterstützt, indem das EngTYPE des Formulars auf "Multipart/Form-Data" festgelegt wird.

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

2.2 Dateien mit AJAX senden

Als nächstes verwenden wir AJAX, um Dateien asynchron einzureichen. Rufen Sie die vom Benutzer ausgewählte Datei über JavaScript ab, verwenden Sie das FormularData -Objekt, um Formulardaten zu erstellen, und senden Sie die Daten über das XMLHTTPREquest -Objekt an den Server.

Hier ist ein Beispiel für den implementierten JavaScript -Code:

 
  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("Hochladen进度：" + percent + "%");
  });
  
  xhr.send(formData);
  

2.3 serverseitige Verarbeitung

Der Server muss die hochgeladenen Dateien empfangen und verarbeiten. In PHP können Sie den folgenden Code verwenden, um die hochgeladene Datei im angegebenen Verzeichnis des Servers zu speichern.

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

3. Fügen Sie eine Fortschrittsleiste hinzu

Um den Benutzern den Fortschritt des Datei -Uploads klar zu ermöglichen, können wir das Fortschrittsereignis von XMLHTTPREQUEST in JavaScript verwenden, um den Fortschritt des Uploads anzuhören. Über dieses Ereignis können wir den Status der Fortschrittsleiste auf der Front-End-Seite aktualisieren.

Hier ist der Code, um die Fortschrittsleiste zu aktualisieren:

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

Über den obigen Code können wir die Breite der Fortschrittsleiste während des Upload -Prozesses dynamisch aktualisieren und damit den Upload -Fortschritt in Echtzeit angezeigt.

4. Zusammenfassung

In den obigen Schritten haben wir eine Ajax -Datei -Upload -Funktion mit einer Fortschrittsleiste erfolgreich implementiert. Wenn Benutzer Dateien hochladen, können sie nicht nur Echtzeit-Fortschritte sehen, sondern auch eine reibungslose Erfahrung genießen. Die Implementierung dieser Funktion umfasst die Front-End-AJAX-Technologie und die Upload-Verarbeitung von Back-End-PHP-Dateien. Mit diesen Schritten können Sie die Datei -Upload -Funktion einfach mit einer Fortschrittsleiste erstellen.

Obwohl das Upload von AJAX -Datei die kollaborative Arbeit zwischen Vorder- und Rückseite erfordert, können Sie durch das Verständnis der spezifischen Implementierung jedes Schritts die Entwicklung verwandter Funktionen erfolgreich vervollständigen.