AJAX (Asynchronous JavaScript And XML) 是一種用于實現異步數據交換的技術。它通過在后臺與服務器進行數據交互，實現頁面的無刷新更新。在網頁開發中，我們經常需要上傳圖片或者文件，而一個常見的需求是將圖片轉換為base64編碼格式，并通過AJAX提交給服務器。本文將詳細介紹如何使用AJAX提交base64數據，并通過實例來說明。

為了更好地理解AJAX提交base64數據的方法，我們來考慮一個實際的場景。假設我們正在開發一個圖片上傳網站，用戶可以選擇本地圖片并上傳。在實現這個功能時，我們希望在用戶選擇圖片后，立即顯示預覽，并且在用戶點擊“上傳”按鈕后，將圖片的base64數據提交給服務器保存。以下是實現這個功能的代碼示例：

// HTML部分
<input type="file" id="fileInput" onchange="previewImage(event)">
<img id="preview" src="" alt="Preview Image">
<button onclick="uploadImage()">上傳</button>
// JavaScript部分
function previewImage(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById("preview").setAttribute("src", event.target.result);
};
reader.readAsDataURL(file);
}
function uploadImage() {
var imgData = document.getElementById("preview").getAttribute("src").split(",")[1];
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
alert("上傳成功");
}
};
xhr.send("imageData=" + encodeURIComponent(imgData));
}

上述代碼中，我們首先在HTML中添加一個文件選擇框，一個img標簽用于顯示預覽圖像，以及一個按鈕用于點擊上傳。在JavaScript部分，我們定義了兩個函數。第一個函數 `previewImage(event)` 是一個事件處理函數，當用戶選擇圖片時觸發。在該函數中，我們通過FileReader對象讀取文件，將文件數據轉換為base64編碼格式，并將base64編碼的數據設置為img標簽的src屬性，從而實現實時預覽功能。

第二個函數 `uploadImage()` 在用戶點擊上傳按鈕時觸發。在該函數中，我們首先獲取預覽圖片的base64數據，然后創建XMLHttpRequest對象，并使用POST方法將數據發送到服務器的/upload路由。同時，我們設置請求頭的Content-Type為`application/x-www-form-urlencoded`，這是一種常見的表單提交數據的方法。在服務器端，我們可以使用相應的后端框架（如Express.js）來處理這個POST請求，將base64數據解碼并保存到服務器。

總結起來，使用AJAX提交base64數據的關鍵是獲取預覽圖片的base64編碼，并將其作為請求的參數發送給服務器。通過使用上述代碼示例，我們可以輕松實現圖片上傳功能，并在用戶選擇圖片后即時顯示預覽。這種方法不僅簡單高效，還可以避免頁面刷新的問題，提升用戶體驗。