How to Display Progress Status of AJAX File Upload?

Display Progress Status of AJAX File Upload

To improve user experience during prolonged AJAX file uploads, users often desire a way to track the upload progress. This can be achieved by leveraging the progress element with real-time updates.

At the backend, many programming models feature progress tracking metrics stored in properties. In this case, a property called $progress is updated with the upload progress from 1 to 100. Additionally, the same class offers a get_progress() method that retrieves the updated progress.

To utilize this progress information in the front end to update the progress element, a solution is required to bridge the gap. Numerous approaches are available, but one straightforward method is to periodically call an AJAX request from the front end that queries the $progress property's value.

The code below demonstrates this technique:

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);
}

Note that this approach relies on an additional PHP script, get_progress.php, that returns the value stored in the $progress property.

<?php
include "class.php";

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

The above is the detailed content of How to Display Progress Status of AJAX File Upload?. For more information, please follow other related articles on the PHP Chinese website!