要在使用 AJAX File Upload 插件時顯示上傳進度，你需要使用 XMLHttpRequest 對象的 upload 屬性來監聽上傳進度事件。以下是一個簡單的示例，展示了如何在 AJAX File Upload 中顯示上傳進度：

1. 首先，確保你已經包含了 jQuery 和 AJAX File Upload 插件的 JavaScript 文件。在 HTML 文件中添加以下代碼：

2. 創建一個 HTML 表單，包含一個文件輸入字段和一個進度條元素：

<form id="uploadForm">
 <input type="file" name="fileToUpload" id="fileToUpload" />
 <button type="submit">上傳文件</button>
</form>

<div id="progressBarContainer">
  <div id="progressBar"></div>
</div>

3. 在 CSS 中設置進度條的樣式：

#progressBarContainer {
  width: 100%;
  background-color: #f3f3f3;
}

#progressBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
}

4. 使用 jQuery 監聽表單提交事件，并使用 AJAX File Upload 插件上傳文件。同時，監聽上傳進度事件并更新進度條：

$(document).ready(function () {
  $("#uploadForm").on("submit", function (e) {
    e.preventDefault();

    var file = $("#fileToUpload")[0].files[0];
    var formData = new FormData();
    formData.append("fileToUpload", file);

    $.ajax({
      url: "your_upload_script.php", // 替換為你的上傳處理腳本
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      xhr: function () {
        var xhr = new window.XMLHttpRequest();

        xhr.upload.addEventListener(
          "progress",
          function (evt) {
            if (evt.lengthComputable) {
              var percentComplete = (evt.loaded / evt.total) * 100;
              $("#progressBar").css("width", percentComplete + "%");
            }
          },
          false
        );

        return xhr;
      },
      success: function (response) {
        console.log("上傳成功");
      },
      error: function (err) {
        console.log("上傳失敗");
      },
    });
  });
});

現在，當你選擇一個文件并點擊上傳按鈕時，進度條將顯示上傳進度。請注意，你需要將 your_upload_script.php 替換為你自己的服務器端上傳處理腳本。