在現代web開發中，經常會遇到需要上傳和顯示圖片的情況。在傳統的方式中，我們通常會使用表單提交或者頁面跳轉來實現上傳和顯示圖片的功能。然而，這種方式會導致頁面的刷新，用戶體驗不佳。幸運的是，借助Ajax技術，我們能夠通過異步請求發送圖片并接收數據，讓用戶能夠更流暢地上傳和顯示圖片，提升用戶體驗。 舉個例子來說明這個問題。假設我們正在開發一個社交媒體網站，用戶可以在個人資料中上傳頭像圖片。在傳統的方式中，用戶需要選擇頭像圖片后提交表單，頁面會重新加載，通過服務器端的處理最后將頭像圖片顯示在用戶的個人資料頁面上。這個過程既繁瑣又影響用戶體驗，因為用戶需要等待頁面重新加載才能看到最新上傳的頭像。 現在，我們可以使用Ajax發送圖片并接收數據來改善用戶體驗。用戶選擇好頭像圖片后，我們通過Ajax將圖片數據發送到服務器端進行處理。服務器端對圖片進行保存、處理等操作，并將保存結果作為響應返回給前端。前端通過接收到的響應數據來更新用戶頁面中的頭像圖片，而無需重新加載整個頁面。這樣，用戶可以立即看到最新上傳的頭像，無需等待頁面刷新。 下面，讓我們來看看如何利用Ajax發送圖片并接收數據的具體實現。 首先，我們需要在前端編寫一個HTML表單，用戶可以通過該表單選擇要上傳的圖片文件。代碼如下：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="image">
<input type="submit" value="上傳">
</form>

在表單中，我們使用了一個input標簽來選擇圖片文件，并在表單提交時觸發上傳操作。 接下來，我們需要在Javascript中使用Ajax來處理表單的提交，并更新用戶頁面中的圖片。代碼如下：

document.getElementById("uploadForm").addEventListener("submit", function (event) {
event.preventDefault(); // 阻止表單默認提交行為
var formData = new FormData(document.getElementById("uploadForm"));
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 根據響應數據更新用戶頁面中的圖片
document.getElementById("avatar").src = response.url;
} else {
console.error("上傳失敗");
}
}
};
xhr.send(formData);
});

在該代碼中，我們首先阻止了表單的默認提交行為。然后，創建了一個FormData對象，將表單數據包裝成一個可發送的格式。接著，我們創建了一個XMLHttpRequest對象，使用POST方法將數據發送到服務器端的/upload路徑。在響應事件的處理函數中，我們首先判斷響應狀態和狀態碼，如果成功則解析響應數據，將其中的圖片URL更新到用戶頁面中。 最后，在服務器端代碼中，我們需處理接收到的圖片文件，并返回響應數據給前端。這里以Node.js為例，代碼如下：

const express = require("express");
const multer = require("multer");
const app = express();
const upload = multer({ dest: "uploads/" });
app.post("/upload", upload.single("image"), (req, res) =>{
const imageUrl = "/uploads/" + req.file.filename;
res.json({ url: imageUrl });
});
app.listen(3000, () =>{
console.log("服務器已啟動");
});

在這段代碼中，我們使用了express框架和multer中間件來處理文件上傳操作。我們設置/uploads目錄作為文件上傳的目標目錄。在/post/upload路由上，通過req.file可以獲取到上傳的圖片文件，我們將其保存的路徑和文件名拼接成圖片URL，并將結果通過res.json()方法返回給前端。 通過上述的代碼，我們成功地實現了使用Ajax發送圖片并接受數據的功能。用戶只需選擇好圖片文件后點擊上傳按鈕，就可以立即看到最新上傳的圖片，無需等待頁面刷新。這大大提升了用戶體驗，并讓上傳和顯示圖片的過程更加流暢。 總結起來，Ajax技術的出現使得圖片上傳和顯示變得更加流暢和便捷。通過異步請求發送圖片并接受數據，用戶無需等待頁面刷新就能看到最新上傳的圖片。我們在文章中舉了一個社交媒體網站上上傳頭像的例子，通過這個例子，我們演示了如何通過HTML表單、Javascript代碼和服務器端代碼來實現這一功能。通過這種方式，我們能夠提升用戶體驗，讓用戶更加愉快地使用網站。