AJAX ファイルアップロードの進行状況を表示するにはどうすればよいですか?

AJAX ファイル アップロードの進行状況を表示

長時間にわたる AJAX ファイル アップロード中のユーザー エクスペリエンスを向上させるために、ユーザーはアップロードを追跡する方法を望むことがよくあります。進捗。これは、リアルタイム更新で進行状況要素を活用することで実現できます。

バックエンドでは、多くのプログラミング モデルは、プロパティに保存される進行状況追跡メトリクスを備えています。この場合、$progress というプロパティが 1 から 100 までのアップロードの進行状況で更新されます。さらに、同じクラスは、更新された進行状況を取得する get_progress() メソッドを提供します。

この進行状況情報をフロントエンドで進行状況要素を更新するには、ギャップを埋めるためのソリューションが必要です。多数のアプローチが利用可能ですが、簡単な方法の 1 つは、$progress プロパティの値をクエリする AJAX リクエストをフロントエンドから定期的に呼び出すことです。

以下のコードは、この手法を示しています。

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

このアプローチは、$progress に格納されている値を返す追加の PHP スクリプト get_progress.php に依存していることに注意してください。プロパティ。

<?php
include "class.php";

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

以上がAJAX ファイルアップロードの進行状況を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。