如何在Progress元素中顯示AJAX檔案上傳進度？

如何在Progress 元素中顯示AJAX 檔案上傳進度

透過AJAX 腳本上傳檔案時，您可能會遇到需要向使用者顯示其進度。特別是當上傳過程需要較長時間時。為了有效地顯示此進度，建議更新前端的 HTML 進度元素。

解決方案：

為了實現此目的，執行類別的進度屬性可以利用。此屬性應在上傳過程中定期更新，以百分比形式提供當前進度（從 1 到 100）。也可以使用 get_progress() 方法來檢索此進度。

為了在前端顯示進度，重要的是建立一種從前端存取執行類別的進度屬性的機制。以下程式碼片段提供如何使用 JavaScript 實現此目的的範例：

function updateProgress() {
  // Send an AJAX request to retrieve the current progress from the PHP script
  $.ajax({
    url: "php/progress.php",
    success: function(response) {
      // Update the progress element with the received progress percentage
      $("#progress").val(response);
    }
  });
  
  // Recursively call this function to continuously update the progress
  setTimeout(updateProgress, 100);
}

$(document).ready(function() {
  updateProgress();
});

在此程式碼中，updateProgress() 函數向 PHP 腳本發送 AJAX 請求，該請求將當前進度作為回應。然後，該回應用於更新前端上 ID「progress」的進度元素。此函數也設定為每100毫秒遞歸呼叫一次，以不斷更新進度。這為用戶創建了上傳進度的即時顯示。

透過實作此解決方案，您可以在前端的進度元素中有效地顯示上傳進度。這透過提供有關上傳過程狀態的視覺回饋來增強用戶體驗。

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