AJAX（Asynchronous JavaScript And XML）是一種通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，而無需重新加載整個(gè)頁面的技術(shù)。在Web開發(fā)中，使用AJAX進(jìn)行異步上傳和顯示圖片的功能越來越受歡迎。通過使用AJAX，用戶可以在上傳圖片的同時(shí)，無需等待頁面刷新就能實(shí)時(shí)地查看上傳的圖片，提升了用戶體驗(yàn)。本文將介紹如何使用AJAX進(jìn)行異步上傳和顯示圖片的方法，并通過舉例說明其實(shí)現(xiàn)步驟和效果。

在實(shí)現(xiàn)異步上傳和顯示圖片的過程中，我們需要用到AJAX技術(shù)和一些服務(wù)器端語言（比如PHP）來處理上傳的圖片。首先，我們需要在前端頁面中創(chuàng)建一個(gè)包含一個(gè)文件選擇框和一個(gè)用于顯示圖片的標(biāo)簽的表單。當(dāng)用戶選擇文件后，通過AJAX將文件發(fā)送到服務(wù)器，服務(wù)器接收到文件后，對(duì)文件進(jìn)行處理，比如將文件保存到指定的文件夾中。最后，服務(wù)器將處理好的圖片路徑返回給前端頁面，前端頁面使用AJAX將返回的圖片路徑回顯到圖片標(biāo)簽中，實(shí)現(xiàn)圖片的異步顯示。

下面是一個(gè)簡單的例子，演示了如何使用AJAX進(jìn)行異步上傳和顯示圖片的功能：

// 前端頁面代碼
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput">
</form>
<img id="preview" src="" alt="Preview Image">
<script>
var form = document.getElementById('uploadForm');
var fileInput = document.getElementById('fileInput');
var preview = document.getElementById('preview');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
console.log(percent + '% uploaded');
}
};
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
preview.src = response.filePath;
}
};
xhr.send(formData);
});
</script>

上述例子中，當(dāng)用戶選擇文件后，通過change事件監(jiān)聽器監(jiān)聽到文件的選擇。創(chuàng)建一個(gè)FormData對(duì)象，用于存儲(chǔ)用戶選擇的文件以及其他需要提交的表單數(shù)據(jù)。然后，創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，使用open方法設(shè)置請(qǐng)求方法和請(qǐng)求地址。在xhr.upload.onprogress回調(diào)函數(shù)中可以獲取到上傳進(jìn)度的信息，可以按需進(jìn)行處理。在xhr.onload回調(diào)函數(shù)中，如果服務(wù)器返回的狀態(tài)碼是200，則表明上傳成功，將服務(wù)器返回的圖片路徑賦值給preview標(biāo)簽的src屬性，即可實(shí)現(xiàn)異步顯示上傳的圖片。

在服務(wù)器端（upload.php）中，我們可以使用相應(yīng)的服務(wù)器端語言來處理上傳的圖片。例如在PHP中，可以使用move_uploaded_file函數(shù)將上傳的文件保存到指定的文件夾，然后返回存儲(chǔ)的文件路徑。

// upload.php 服務(wù)器端代碼
<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempFile = $_FILES['file']['tmp_name'];
$uploadsDir = 'uploads/';
$fileName = $_FILES['file']['name'];
$uploadPath = $uploadsDir . $fileName;
if (move_uploaded_file($tempFile, $uploadPath)) {
$response = [
'success' => true,
'filePath' => $uploadPath
];
} else {
$response = [
'success' => false,
'filePath' => ''
];
}
} else {
$response = [
'success' => false,
'filePath' => ''
];
}
echo json_encode($response);
?>

上述例子中，move_uploaded_file函數(shù)用于將上傳的文件從臨時(shí)目錄移動(dòng)到指定的文件夾中。根據(jù)上傳文件的成功與否，返回相應(yīng)的JSON格式響應(yīng)，其中包含上傳成功后圖片存儲(chǔ)的路徑。

通過上述例子，我們可以看到如何使用AJAX進(jìn)行異步上傳和顯示圖片的操作。通過在前端頁面通過AJAX將文件發(fā)送到服務(wù)器，然后服務(wù)器對(duì)文件進(jìn)行處理，最后將處理后的圖片路徑返回給前端頁面，實(shí)現(xiàn)異步顯示圖片。這種方式不僅提升了用戶體驗(yàn)，還可以減少頁面的刷新次數(shù)，提高了網(wǎng)站的性能。