Ajax(Asynchronous JavaScript and XML)是一種用于創建交互式和動態的網頁應用程序的技術。其中一種常見的應用是通過Ajax上傳圖片并顯示上傳進度。這種功能在現代web應用程序中非常常見，例如社交媒體網站、博客或者電子商務網站等。通過實時顯示文件上傳的進度，用戶可以更加方便地了解圖片上傳的狀態，提升用戶體驗。

假設我們有一個簡單的圖片上傳表單，用戶可以選擇一張圖片并點擊"上傳"按鈕。在上傳過程中，我們想要實時顯示上傳進度條。

<form id="upload-form" enctype="multipart/form-data"><input type="file" id="image-input" name="image" /><input type="button" value="上傳" onclick="uploadImage()" /></form><div id="progress-bar"></div>

要實現這個功能，我們需要使用Ajax來異步上傳圖片，并通過JavaScript來更新進度條。首先，我們需要定義一個JavaScript函數uploadImage()，該函數將在點擊上傳按鈕時被調用。

function uploadImage() {
var formData = new FormData();
var imageInput = document.getElementById('image-input');
formData.append('image', imageInput.files[0]);
var xhr = new XMLHttpRequest();
// 監聽上傳進度
xhr.upload.addEventListener('progress', function(event) {
var progressPercent = Math.round((event.loaded / event.total) * 100);
var progressBar = document.getElementById('progress-bar');
progressBar.style.width = progressPercent + '%';
progressBar.innerHTML = progressPercent + '%';
});
xhr.open('POST', '/upload.php', true);
xhr.send(formData);
}

在uploadImage()函數中，我們首先創建了一個FormData對象并將選定的圖片文件添加到對象中。然后，我們創建了一個XMLHttpRequest對象，該對象用于發送異步請求。在上傳過程中，我們監聽了upload事件，并使用上傳的字節數除以總字節數計算上傳百分比。接下來，我們在HTML中的進度條元素中更新進度。進度條元素的寬度通過修改樣式width屬性來實現，進度百分比則通過修改元素的HTML內容來實現。

當圖片上傳完成后，服務器將響應一個JSON對象，其中包含了上傳結果的信息。我們可以根據需要處理服務器響應，例如顯示上傳成功或者上傳失敗的消息。

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert('圖片上傳成功！');
} else {
alert('圖片上傳失敗，請重試！');
}
} else {
alert('發生錯誤，HTTP狀態碼：' + xhr.status);
}
}
};

通過以上代碼，我們實現了將圖片通過Ajax上傳并顯示上傳進度的功能。用戶在選擇并上傳圖片時，將能夠看到上傳進度條實時更新，以及上傳成功或失敗的消息提示。這種方式提升了用戶體驗，使用戶更加方便地了解圖片上傳的狀態。