AJAX（Asynchronous JavaScript and XML）是一種在網頁上進行異步數據交互的技術，可以實現頁面無刷新的效果。在圖片上傳過程中，往往需要實時預覽上傳的圖片，以方便用戶確認上傳圖片的準確性。本文將介紹如何使用AJAX異步上傳圖片并實時預覽。

在開始之前，我們先來了解一下AJAX的基本原理。AJAX通過JavaScript、XMLHttpRequest和后臺服務器進行數據交互。當用戶選擇一張圖片后，JavaScript會發起一個HTTP請求到服務器，將圖片上傳至服務器的臨時目錄中。服務器接收到請求后，會返回一個數據響應，其中包含了圖片的URL。JavaScript會根據服務器響應的URL獲取到圖片，然后在頁面上進行實時預覽。

下面將展示一個簡單的HTML代碼，在頁面中添加一個文件上傳輸入框和一個用于實時預覽圖片的元素。

<input type="file" id="uploadFile" name="uploadFile" />
<img id="preview" src="#" alt="Preview Image" />

接下來，我們需要編寫JavaScript代碼來實現圖片上傳和預覽功能。首先，我們需要給文件上傳輸入框添加一個事件監聽器，當用戶選擇了文件后，會觸發該事件的回調函數。

// 獲取文件上傳輸入框
var fileInput = document.getElementById('uploadFile');
// 監聽文件選擇事件
fileInput.addEventListener('change', function() {
// 獲取用戶選擇的文件
var selectedFile = fileInput.files[0];
// 創建一個FormData對象
var formData = new FormData();
// 將文件添加到FormData對象中
formData.append('file', selectedFile);
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求的參數
xhr.open('POST', '/upload', true);
// 監聽上傳進度
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percentComplete = Math.round((e.loaded / e.total) * 100);
console.log('Upload Progress: ' + percentComplete + '%');
}
}, false);
// 監聽上傳完成事件
xhr.addEventListener('load', function(e) {
if (xhr.status === 200) {
console.log('Upload Complete');
// 獲取服務器返回的圖片URL
var imageURL = xhr.responseText;
// 設置<img>元素的src屬性為圖片URL，實現實時預覽
var previewImage = document.getElementById('preview');
previewImage.src = imageURL;
}
}, false);
// 發送AJAX請求
xhr.send(formData);
});

上述代碼中，我們首先獲取了文件上傳輸入框，并添加了一個change事件監聽器。在回調函數中，獲取用戶選擇的文件，并創建一個FormData對象，將文件添加到其中。然后，創建一個XMLHttpRequest對象，設置請求的參數。在上傳過程中，監聽了上傳進度事件，可以實時顯示上傳的進度。最后，在上傳完成后，獲取服務器返回的圖片URL，將其設置為元素的src屬性，實現實時預覽。

總結起來，通過使用AJAX可以實現圖片的異步上傳和實時預覽。用戶在選擇了圖片后，上傳到服務器的同時，頁面上會實時顯示上傳的進度和預覽圖片的效果。這樣，可以提高用戶體驗，使圖片上傳的過程更加直觀和簡便。