AJAX上傳圖片保存到服務器是一種常見的網絡應用場景。通過AJAX技術，我們可以在不刷新整個頁面的情況下，將用戶上傳的圖片實時發送到服務器進行保存。這不僅提高了用戶的操作體驗，還可以有效地減輕服務器的壓力。本文將詳細介紹如何使用AJAX上傳圖片并保存到服務器。

在實際應用中，我們經常會遇到個人資料編輯頁面需要上傳用戶頭像的場景。用戶可以點擊編輯頁面上的頭像區域，選擇本地存儲的圖片進行上傳。一般來說，用戶選擇圖片后，會先將圖片預覽到頁面上的一個圖片框中，以便用戶可以預覽所選擇的圖片。然后，通過點擊保存按鈕，使用AJAX將圖片發送到后端服務器進行保存。

// HTML部分
<div id="avatar">
<img id="preview" src="default.jpg">
</div>
<input type="file" id="file" name="file">
<input type="button" value="保存" onclick="saveImage()">
// JavaScript部分
function saveImage() {
var file = document.getElementById("file").files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
document.getElementById("preview").src = xhr.responseText;
}
};
xhr.send(formData);
}

在上述代碼中，首先我們需要為圖片預覽區域和文件選擇框添加唯一的id屬性，以便在JavaScript中使用。當用戶選擇圖片后，我們利用JavaScript的FormData對象來構建一個表單數據，將選擇的文件添加進去。接著，創建一個XMLHttpRequest對象，使用open方法指定請求的方法、URL和是否異步。然后，通過send方法將表單數據發送到服務器。服務器端接收到表單數據后，可以進行相應的處理，將圖片保存到指定的位置，并返回圖片的URL。

在服務器端，我們需要編寫一個處理上傳圖片的腳本。這個腳本可以使用任何服務器端語言來實現，比如PHP、Java等。下面是一個使用PHP處理圖片上傳的例子：

<?php
$file = $_FILES["file"];
$tempPath = $file["tmp_name"];
$newName = "uploads/" . $file["name"];
if (move_uploaded_file($tempPath, $newName)) {
echo $newName;
} else {
echo "error";
}
?>

在上述PHP腳本中，我們使用$_FILES全局變量來獲取上傳的文件。其中$_FILES["file"]中的"file"對應于前端表單中添加的name屬性值。通過move_uploaded_file函數，我們將臨時文件移動到指定的目錄，并給文件重新命名。最后，根據是否成功移動文件，返回不同的響應。在這個例子中，如果文件成功保存到指定位置，則返回保存后的文件名，否則返回字符串"error"。

通過以上的步驟，我們成功完成了使用AJAX上傳圖片并保存到服務器的功能。無論是個人資料編輯頁面、圖片分享網站還是在線相冊應用，都可以使用這種方式來處理圖片上傳。AJAX技術的使用不僅提升了用戶的體驗，還減輕了服務器的負擔，使得Web應用更加高效和友好。