AJAX（Asynchronous JavaScript and XML）是一種用于創建快速且不需要頁面刷新的動態網頁的技術。在圖片上傳提交方面，AJAX可以幫助我們實現更加流暢的用戶體驗。通過使用AJAX，用戶可以在不離開當前頁面的情況下，即時上傳并查看上傳圖片的預覽，幫助用戶更加方便地管理和提交圖片。本文將通過舉例說明，介紹如何通過AJAX實現圖片上傳提交的功能。

假設我們有一個簡單的圖片上傳表單，包含一個文件選擇框和一個提交按鈕：

<form id="upload-form" enctype="multipart/form-data" method="POST" action="upload.php">
<input id="upload-input" type="file" name="uploadFile" />
<button id="upload-button" type="submit">上傳</button>
</form>

首先，我們將為上傳按鈕綁定一個點擊事件，并阻止表單的默認提交行為。然后，通過AJAX發送一個POST請求，將圖片文件發送到服務器：

<script>
document.getElementById('upload-button').addEventListener('click', function (e) {
e.preventDefault();
var file = document.getElementById('upload-input').files[0];
var formData = new FormData();
formData.append('uploadFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Upload successful!');
}
};
xhr.send(formData);
});
</script>

在上述代碼中，我們使用了XMLHttpRequest對象來發送異步請求。首先，獲取用戶選擇的文件，并創建一個FormData對象，將文件添加到FormData中。然后，創建一個AJAX請求對象，并設置請求方法和URL。最后，監聽請求的狀態，并在請求成功時輸出日志。

當用戶點擊上傳按鈕時，會觸發點擊事件，執行AJAX請求。服務器接收到請求后，將圖片保存到指定的位置，并返回一個成功的響應。此時，我們可以在控制臺看到“Upload successful!”的日志。通過這種方式，用戶可以即時上傳圖片，并獲得上傳成功的反饋，無需離開當前頁面。

除了實時上傳圖片，我們還可以通過AJAX實現預覽功能。假設我們有一個用于圖片預覽的標簽和一個用于顯示預覽的

<img id="preview-img" src="" alt="Preview" />
<div id="preview-container"></div>

<script>
document.getElementById('upload-input').addEventListener('change', function () {
var file = document.getElementById('upload-input').files[0];
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('preview-img').src = e.target.result;
document.getElementById('preview-container').style.backgroundImage = 'url(' + e.target.result + ')';
};
reader.readAsDataURL(file);
});
</script>