元素，用于實(shí)時(shí)顯示縮略圖。代碼如下：

<form id="uploadForm">
<input type="file" id="fileInput" name="fileInput" />
</form>
<div id="thumbnail"></div>

接下來(lái)，我們需要使用AJAX來(lái)處理文件上傳。利用JavaScript的FormData對(duì)象，我們可以獲取用戶選擇的文件并將其發(fā)送到服務(wù)器。代碼如下所示：

var form = document.getElementById("uploadForm");
var fileInput = document.getElementById("fileInput");
form.addEventListener("submit", function(e) {
e.preventDefault();
var formData = new FormData();
formData.append("file", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上傳成功
var response = JSON.parse(xhr.responseText);
var thumbnail = document.getElementById("thumbnail");
thumbnail.innerHTML = '<img src="' + response.url + '">';
}
};
xhr.send(formData);
});

上述代碼通過監(jiān)聽表單的submit事件來(lái)觸發(fā)AJAX請(qǐng)求。在請(qǐng)求中，我們首先創(chuàng)建一個(gè)FormData對(duì)象，然后通過append方法將用戶選擇的文件添加到其中。接下來(lái)，我們創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，并將其打開。注意，第三個(gè)參數(shù)需要設(shè)置為true以異步方式發(fā)送請(qǐng)求。然后，我們定義onreadystatechange事件的處理函數(shù)，在其內(nèi)部檢查并處理響應(yīng)。如果響應(yīng)狀態(tài)為4（請(qǐng)求已完成）且狀態(tài)碼為200（請(qǐng)求成功），我們解析響應(yīng)文本并將返回的URL插入到頁(yè)面中。

在服務(wù)器端，我們需要使用PHP來(lái)處理上傳請(qǐng)求并生成縮略圖。我們可以使用PHP的$_FILES全局變量來(lái)獲取上傳的文件，并使用GD庫(kù)來(lái)處理圖片。以下是一個(gè)基本的上傳和生成縮略圖的PHP代碼：

$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
// 檢查文件類型
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif") {
echo json_encode(["error" =>"Invalid file type"]);
$uploadOk = 0;
}
// 上傳文件
if ($uploadOk == 1) {
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
// 生成縮略圖
$thumbnail = $targetDir . "thumbnail_" . basename($_FILES["file"]["name"]);
$thumbnailImage = imagecreatetruecolor(100, 100);
$sourceImage = imagecreatefromjpeg($targetFile);
$sourceWidth = imagesx($sourceImage);
$sourceHeight = imagesy($sourceImage);
imagecopyresized($thumbnailImage, $sourceImage, 0, 0, 0, 0, 100, 100, $sourceWidth, $sourceHeight);
imagejpeg($thumbnailImage, $thumbnail);
echo json_encode(["url" =>$targetFile, "thumbnail" =>$thumbnail]);
} else {
echo json_encode(["error" =>"File upload failed"]);
}
}

上述代碼首先定義了目標(biāo)目錄和目標(biāo)文件，并設(shè)置了一些上傳相關(guān)的變量。然后，我們通過檢查文件類型來(lái)確保上傳的文件是圖片。如果類型驗(yàn)證失敗，我們返回一個(gè)json格式的錯(cuò)誤消息。否則，我們使用move_uploaded_file函數(shù)將文件從臨時(shí)位置移動(dòng)到目標(biāo)目錄，并創(chuàng)建一個(gè)縮略圖。最后，我們返回一個(gè)包含原圖URL和縮略圖URL的json響應(yīng)。

綜上所述，通過結(jié)合AJAX和PHP，我們可以實(shí)現(xiàn)上傳和顯示縮略圖的功能，提高用戶體驗(yàn)并減少頁(yè)面刷新。無(wú)論是在社交媒體網(wǎng)站、圖片分享平臺(tái)還是電子商務(wù)網(wǎng)站，這樣的功能都可以為用戶提供更好的使用體驗(yàn)。