Wie zeige ich den Fortschrittsstatus des AJAX-Datei-Uploads an?

Fortschrittsstatus des AJAX-Datei-Uploads anzeigen

Um die Benutzererfahrung bei längeren AJAX-Datei-Uploads zu verbessern, wünschen sich Benutzer häufig eine Möglichkeit, den Upload zu verfolgen Fortschritt. Dies kann durch die Nutzung des Fortschrittselements mit Echtzeitaktualisierungen erreicht werden.

Im Backend verfügen viele Programmiermodelle über in Eigenschaften gespeicherte Fortschrittsverfolgungsmetriken. In diesem Fall wird eine Eigenschaft namens $progress mit dem Upload-Fortschritt von 1 bis 100 aktualisiert. Darüber hinaus bietet dieselbe Klasse eine get_progress()-Methode an, die den aktualisierten Fortschritt abruft.

Um diese Fortschrittsinformationen im zu nutzen Um das Fortschrittselement im Frontend zu aktualisieren, ist eine Lösung erforderlich, um diese Lücke zu schließen. Es stehen zahlreiche Ansätze zur Verfügung, aber eine einfache Methode besteht darin, regelmäßig eine AJAX-Anfrage vom Frontend aufzurufen, die den Wert der $progress-Eigenschaft abfragt.

Der folgende Code demonstriert diese Technik:

var progress = 0;

setInterval(function() {
    $.ajax({
        url: "get_progress.php",
        method: "GET",
        success: function(response) {
            progress = response;
            updateProgressBar(progress);
        }
    });
}, 1000);

function updateProgressBar(progress) {
    $("#progress-element").val(progress);
}

Beachten Sie, dass dieser Ansatz auf einem zusätzlichen PHP-Skript get_progress.php basiert, das den in der Eigenschaft $progress gespeicherten Wert zurückgibt.

<?php
include "class.php";

$object = new MyClass();
echo $object->get_progress();
?>

Das obige ist der detaillierte Inhalt vonWie zeige ich den Fortschrittsstatus des AJAX-Datei-Uploads an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!