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

Barbara Streisand
發布: 2024-11-10 06:09:02
原創
620 人瀏覽過

How to Display AJAX File Upload Progress in a Progress Element?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板