Ajax是一種常用的前端開發技術，可以實現網頁的無刷新更新數據。而FormData是一種用于創建表單數據的對象，可以方便地將表單數據以鍵值對的形式發送到服務器。本文將介紹如何使用Ajax和FormData實現圖片的上傳功能，并通過舉例說明其用法和相關注意事項。

在實際開發中，經常遇到需要用戶上傳圖片的場景。以一個用戶頭像上傳功能為例，我們可以先創建一個表單，包含一個input[type="file"]元素用于選擇圖片文件，并且要添加一個id屬性設置為"avatar"，如下所示：

<form id="uploadForm" enctype="multipart/form-data" method="post">
<input type="file" id="avatar" name="avatar" accept="image/*">
<button type="submit">上傳</button>
</form>

接下來，我們需要使用JavaScript來處理用戶上傳的圖片。首先，我們可以通過document.getElementById方法獲取到表單元素和input元素的引用：

let form = document.getElementById('uploadForm');
let input = document.getElementById('avatar');

在用戶選擇完圖片文件后，我們可以通過添加change事件監聽器來獲取到用戶選擇的文件對象，并創建FormData對象：

input.addEventListener('change', function() {
let file = input.files[0];
let formData = new FormData();
formData.append('avatar', file);
});

在FormData對象中，我們使用append方法將文件對象添加到表單中，第一個參數為文件字段的名稱，第二個參數為文件對象。這樣，我們就成功地將用戶選擇的圖片文件添加到了FormData對象中。

接下來，我們可以使用Ajax來發送FormData對象到后端服務器。這里以使用XMLHttpRequest對象為例：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
let percent = (event.loaded / event.total) * 100;
console.log(percent + '% 已上傳');
}
});
xhr.addEventListener('load', function() {
if (xhr.status === 200) {
console.log('上傳成功');
} else {
console.log('上傳失敗');
}
});
xhr.send(formData);

在上述代碼中，我們通過XMLHttpRequest對象的open方法指定了請求的方法、URL和異步標志。然后，我們添加了一個progress事件監聽器用于實時顯示上傳進度。當文件上傳完成后，我們通過load事件監聽器來判斷上傳是否成功。

需要注意的是，由于使用了FormData對象，我們需要將表單的enctype屬性設置為"multipart/form-data"。另外，當FormData對象被發送到服務器時，請求的Content-Type會自動設置為"multipart/form-data"，不需要手動設置。

總結起來，使用Ajax和FormData實現圖片的上傳功能是十分便捷的。通過將用戶選擇的圖片文件添加到FormData對象中并通過Ajax發送到后端服務器，我們可以輕松地實現圖片的上傳功能。但是需要注意的是，由于部分瀏覽器對File API和FormData的支持可能存在差異，因此在使用時需要進行兼容性測試。