AJAX 圖片上傳是網頁開發中常用的一項功能，它可以在不刷新整個頁面的情況下實現圖片的上傳。這種技術能夠帶來更好的用戶體驗，并且可以提高網站的性能和速度。在本文中，我們將介紹如何使用 AJAX 來實現圖片上傳，同時使用 MDN 提供的資源來輔助我們的開發。

圖片上傳通常涉及到以下幾個步驟：選擇圖片、預覽圖片、上傳圖片，最后將上傳的結果顯示給用戶。對于選擇圖片這一步驟，我們可以借助 HTML5 中的<input type="file">元素，通過在用戶點擊該元素時彈出文件選擇對話框，來實現圖片的選擇。以下是一個簡單的示例：

<input type="file" id="filePicker">

預覽圖片是在用戶選擇圖片后，將選中的圖片實時顯示給用戶的過程。通常我們可以使用 JavaScript 來解析文件，獲取其內容，并將其顯示在頁面中。以下是一個使用 FileReader 的示例代碼：

var filePicker = document.getElementById('filePicker');
filePicker.addEventListener('change', function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var previewImage = document.getElementById('previewImage');
previewImage.src = e.target.result;
};
reader.readAsDataURL(file);
});

在上述代碼中，我們通過事件監聽器來監測文件選擇框的變化。一旦用戶選擇了文件，我們便可以通過FileReader對象的readAsDataURL方法來解析文件，并將其結果賦值給預覽圖片的src屬性。這樣，用戶便可以實時預覽所選的圖片。

上傳圖片是將用戶選擇的圖片發送給服務器并儲存的過程。在 AJAX 中，我們可以使用FormData對象來處理圖片的上傳。以下是一個使用 AJAX 上傳圖片的示例代碼：

var filePicker = document.getElementById('filePicker');
filePicker.addEventListener('change', function(event) {
var file = event.target.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('圖片上傳成功');
} else {
console.log('圖片上傳失敗');
}
}
};
xhr.open('POST', '/upload', true);
xhr.send(formData);
});

在上述代碼中，我們使用FormData對象來創建一個表單數據，并將用戶選擇的文件添加到該表單數據中。然后，我們使用 AJAX 中的XMLHttpRequest來創建一個請求對象，并定義其狀態變化時的回調函數。在回調函數中，我們可以根據響應的狀態碼來判斷圖片上傳是否成功。

通過以上的示例，我們可以看到使用 AJAX 圖片上傳的過程非常簡單。我們只需要借助一些簡單的 JavaScript 代碼即可實現圖片的選擇、預覽和上傳。同時，MDN 中提供了豐富的資源和文檔來輔助我們的開發。如果你對 AJAX 圖片上傳感興趣，不妨去 MDN 的官網查看更多相關的文檔和示例代碼。