本文將介紹使用Ajax上傳圖片并即時顯示的方法。通過Ajax上傳圖片，可以實現無頁面刷新的圖片上傳功能，用戶可以即時看到上傳的圖片。下面將詳細介紹這個功能的實現方法。

首先，我們需要在前端頁面中添加一個文件上傳的input標簽，并為其添加一個id屬性，以便后續操作。例如：

<input type="file" id="fileUpload" />

接下來，我們需要使用JavaScript來處理文件上傳的操作。首先，我們需要獲取到用戶選擇的圖片文件，并將其放入FormData對象中。代碼如下：

var file = document.getElementById("fileUpload").files[0];
var formData = new FormData();
formData.append("image", file);

然后，我們需要創建一個XMLHttpRequest對象，并指定上傳的URL地址，以及請求的方法和內容的類型。代碼如下：

var xhr = new XMLHttpRequest();
var url = "upload.php";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");

接下來，我們需要監聽XMLHttpRequest對象的readyState屬性和onreadystatechange事件，以便在上傳過程中獲取上傳的狀態和結果。代碼如下：

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 上傳成功
var response = xhr.responseText;
// 在頁面中顯示上傳的圖片
document.getElementById("preview").src = response;
} else {
// 上傳失敗
alert("上傳失敗，請重試");
}
}
};

最后，我們需要發送上傳請求，并將之前創建的FormData對象作為參數傳入。代碼如下：

xhr.send(formData);

完成上述操作后，用戶選擇圖片后，即可通過Ajax上傳圖片，并即時顯示在頁面中。例如，用戶選擇了一張名為“image.jpg”的圖片，上傳后通過Ajax獲得了上傳后的圖片URL地址為“http://example.com/uploads/image.jpg”，則頁面上一個id為“preview”的img標簽的src屬性將被設置為“http://example.com/uploads/image.jpg”，用戶即可看到上傳的圖片。

總結一下，通過使用Ajax上傳圖片并即時顯示是一種方便快捷的圖片上傳方式。通過前端代碼實現文件上傳并通過Ajax發送請求到后端，我們可以實現無頁面刷新的圖片上傳功能，并即時顯示上傳的圖片。請注意，這只是其中一種實現方式，具體的實現方式可能會根據實際情況有所調整。