如何顯示AJAX檔案上傳的進度狀態？-php教程-PHP中文網

如何顯示AJAX檔案上傳的進度狀態？

Barbara Streisand

發布： 2024-11-23 22:45:15

原創

537 人瀏覽過

How to Display Progress Status of AJAX File Upload?

顯示AJAX檔案上傳的進度狀態

為了改善長時間AJAX檔案上傳的使用者體驗，使用者通常希望有一種方法來追蹤上傳進步。這可以透過利用即時更新的進度元素來實現。

在後端，許多程式設計模型都具有儲存在屬性中的進度追蹤指標。在本例中，名為 $progress 的屬性會更新為從 1 到 100 的上傳進度。此外，同一類別也提供 get_progress() 方法來檢索更新的進度。

要在前端更新進度元素，需要一個解決方案來彌補差距。有多種方法可供使用，但簡單的方法是從前端定期呼叫 AJAX 請求來查詢 $progress 屬性的值。

下面的程式碼示範了此技術：

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

登入後複製

請注意，此方法依賴額外的 PHP 腳本 get_progress.php，該腳本傳回儲存在 $progress 屬性中的值。

<?php
include "class.php";

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

登入後複製

以上是如何顯示AJAX檔案上傳的進度狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！