首頁  >  文章  >  後端開發  >  如何顯示AJAX檔案上傳的進度狀態?

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

Barbara Streisand
Barbara Streisand原創
2024-11-23 22:45:15540瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn