在現代網頁開發中，Ajax 是一種常用的技術，它允許網頁通過異步通信與服務器交換數據，而無需刷新整個頁面。而在圖片上傳功能的實現中，Ajax同樣發揮了重要的作用。使用Ajax上傳圖片能夠提供快速、流暢的用戶體驗，并且可以實時顯示上傳進度。在上傳圖片后，還可以采用Ajax技術保存修改，無需頁面刷新即可實現數據的更新，為用戶提供更加高效便捷的功能。

假設我們要實現一個圖片上傳并保存修改的功能，首先，我們需要在前端設計一個簡潔明了的界面。用戶可以通過點擊頁面上的上傳按鈕選擇本地的圖片文件，并顯示在頁面上。這樣用戶就可以清楚地看到自己選擇的圖片是否正確。在用戶確認上傳的圖片后，我們就可以通過Ajax來上傳圖片到服務器了。

<form id="uploadForm" enctype="multipart/form-data" method="post" action="upload.php">
<input type="file" name="imageFile" id="imageFile" onchange="uploadImage()" />
<input type="submit" value="上傳" />
</form>
<script>
function uploadImage() {
var form = document.getElementById("uploadForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log("上傳進度：" + percentComplete + "%");
}
};
xhr.onload = function() {
if (xhr.status === 200) {
console.log("上傳成功！");
} else {
console.log("上傳失敗！");
}
};
xhr.send(formData);
}
</script>

在上面的代碼中，我們首先通過獲取表單元素和創建FormData對象獲取要上傳的圖片。然后，使用XMLHttpRequest對象來創建一個異步請求，通過open方法指定請求的方式、URL和是否異步。接著，我們通過upload屬性的onprogress事件來監聽上傳進度，并在控制臺輸出當前的上傳進度。最后，我們在請求完成后的onload事件中可以處理服務端返回的數據，如果狀態碼為200則表示上傳成功，否則表示上傳失敗。

當我們上傳完圖片后，接下來就是保存修改的功能。在保存修改的時候，我們同樣可以使用Ajax來實現頁面的無刷新更新。假設我們要修改圖片的標題，我們可以添加一個文本輸入框，并在退出焦點時保存修改的標題。

<div id="imageContainer">
<img src="uploaded_image.jpg" alt="uploaded image" />
<input type="text" id="imageTitle" value="圖片標題" onblur="saveTitle()" />
</div>
<script>
function saveTitle() {
var imageTitle = document.getElementById("imageTitle").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "save_title.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log("標題保存成功！");
} else {
console.log("標題保存失敗！");
}
}
};
xhr.send("title=" + imageTitle);
}
</script>

在上面的代碼中，我們通過獲取文本輸入框的值來獲取用戶輸入的標題。接著，我們同樣使用XMLHttpRequest對象來創建一個異步請求，通過open方法指定請求的方式、URL和是否異步。我們也在請求頭中設置了Content-Type為"application/x-www-form-urlencoded"，表示發送的數據是以 key=value 的形式進行編碼。而在請求完成后的onreadystatechange事件中，我們同樣可以處理服務端返回的數據，如果狀態碼為200則表示保存修改成功，否則表示保存修改失敗。

通過以上的實例，我們可以看到，使用Ajax上傳圖片并保存修改可以極大地提高用戶體驗和頁面的響應速度。通過無需刷新頁面就可以實現數據更新，為用戶提供更加高效便捷的功能。