本文將介紹使用Ajax上傳圖片并顯示上傳進度條的方法。隨著互聯網的發展，圖片上傳已經成為了我們日常網站開發中常見的需求之一。然而，上傳大型圖片的過程可能會非常耗時，用戶需要等待較長時間才能完成上傳。為了提高用戶體驗，我們可以通過Ajax來實現圖片的異步上傳，并在頁面上顯示上傳進度條。這樣，用戶就能清楚地知道圖片上傳的進度，而不必一直等待上傳完成。

假設我們有一個簡單的圖片上傳表單，用戶可以選擇一張圖片并點擊“上傳”按鈕。我們希望在圖片上傳的過程中，在頁面上展示上傳進度條。

<form id="upload-form" enctype="multipart/form-data"><input type="file" id="image-input" name="image" /><button id="upload-button">上傳</button></form>

在頁面上，我們需要一個用于顯示上傳進度的元素，可以用一個進度條或者一個簡單的文本來表示。以下是使用Bootstrap庫的一個簡單的進度條示例：

<div class="progress" style="display: none;"><div class="progress-bar" role="progressbar" style="width: 0%"></div></div>

在 JavaScript 中，我們使用Ajax來實現異步上傳。以下是一個使用 jQuery 庫的示例代碼：

$(document).ready(function() {
$('#upload-form').submit(function(e) {
e.preventDefault(); // 阻止表單默認提交行為
var form = $(this);
var fileInput = $('#image-input');
var progressBar = $('.progress-bar');
var formData = new FormData(form[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
xhr: function() {
// 創建 XMLHttpRequest 對象并返回
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var progress = Math.round((e.loaded / e.total) * 100); // 計算上傳進度百分比
progressBar.width(progress + '%'); // 更新進度條寬度
}
});
return xhr;
},
success: function(response) {
// 上傳成功后的操作
},
error: function() {
// 上傳出錯時的操作
}
});
});
});

在上述代碼中，我們使用了 jQuery 的 Ajax 方法來發送異步請求。我們將上傳表單的數據作為 FormData 對象傳遞給Ajax請求，并在xhr參數中設置了一個上傳進度的事件監聽器。在這個事件監聽器中，我們根據已上傳的數據量和總數據量計算出上傳進度的百分比，并將其更新到進度條的寬度中。

當上傳完成后，我們可以在 success 回調函數中對上傳成功的操作進行處理，或者在 error 回調函數中處理上傳出錯的情況。

總之，通過使用Ajax上傳圖片并顯示進度條，我們可以提高用戶體驗，讓用戶清楚地知道圖片上傳的進度。這種方法不僅適用于圖片上傳，還可以應用于其他需要上傳大量數據的場景。希望本文能幫助到你！