本文將介紹如何使用Ajax上傳頭像，并實時顯示用戶上傳的圖片。我們將通過一個具體的例子來說明這個過程。

假設我們有一個網站，用戶可以在注冊時上傳自己的頭像。我們希望用戶選擇圖片后能夠無需刷新頁面就能立即看到自己上傳的頭像。為了實現這個功能，我們可以使用Ajax來完成圖片的上傳和顯示。

首先，我們需要創建一個包含上傳表單和圖片顯示區域的頁面。以下是一個簡化版的HTML代碼：

<form id="upload-form" enctype="multipart/form-data"><input type="file" name="avatar" id="avatar-input"><button type="submit">上傳頭像</form><div id="avatar-container"></div>

在上面的代碼中，我們使用了form表單來實現文件上傳，其中的input標簽的type屬性為file。我們還添加了一個空的div標簽，用于顯示用戶上傳的頭像。

接下來，我們需要使用JavaScript來處理表單的提交事件，并發送Ajax請求。以下是一個示例：

document.getElementById('upload-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var formData = new FormData(this); // 創建一個FormData對象，用于保存用戶選擇的文件
// 發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 上傳成功，根據返回的圖片URL顯示頭像
var avatarURL = xhr.responseText;
document.getElementById('avatar-container').innerHTML = '<img src="' + avatarURL + '" alt="avatar">';
}
};
xhr.send(formData);
});

在上面的代碼中，我們首先阻止了表單的默認提交行為，然后創建了一個FormData對象，用于保存用戶選擇的文件。接下來，我們通過XMLHttpRequest對象來發送Ajax請求。在請求的回調函數中，我們可以根據服務器返回的圖片URL來顯示用戶上傳的頭像。

最后，我們還需要編寫服務器端的代碼來處理接收到的圖片文件，并返回圖片的URL。以下是一個簡化版的Node.js代碼：

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); // 設置上傳文件的保存路徑
// 處理圖片上傳的路由
app.post('/upload', upload.single('avatar'), function(req, res) {
// 生成圖片的URL
var avatarURL = '/uploads/' + req.file.filename;
// 返回圖片的URL
res.send(avatarURL);
});
// 啟動服務器
app.listen(3000, function() {
console.log('服務器已啟動，監聽端口3000');
});

在上面的代碼中，我們使用了express框架來創建一個簡單的服務器。使用multer中間件來處理圖片的上傳，并保存到指定的目錄中。在處理圖片上傳的路由函數中，我們生成了圖片的URL，并將其作為響應返回給客戶端。

總結一下，通過使用Ajax上傳頭像并實時顯示圖片，我們可以提升用戶體驗，讓用戶無需刷新頁面就能即時看到自己上傳的頭像。通過一個簡單的例子，我們了解了如何使用Ajax、FormData和XMLHttpRequest來實現這個功能，并介紹了服務器端的處理方法。