AJAX 圖片上傳是一種在網頁上無刷新上傳圖片的技術，它使得用戶能夠方便地上傳自己的圖片，并實時地在頁面上顯示出來。本文將通過一個簡單的 AJAX 圖片上傳 Demo 來展示如何實現這一功能。 在我們的 Demo 中，我們將使用 HTML、CSS、JavaScript 和 PHP 來完成上傳圖片的功能。首先，我們需要在 HTML 頁面中創建一個上傳按鈕和一個用于顯示上傳圖片的區域。用戶可以通過點擊上傳按鈕來選擇自己的圖片文件。一旦用戶選擇了圖片，JavaScript 將負責獲取文件并通過 AJAX 請求將其發送到服務器。 在 JavaScript 中，我們將使用 `XMLHttpRequest` 對象來發送 AJAX 請求。我們需要給 `XMLHttpRequest` 對象設置 `open()` 方法的參數，包括請求的方法和 URL。然后，我們需要添加一個事件偵聽器來監聽 `XMLHttpRequest` 對象的 `onreadystatechange` 事件。 當 `XMLHttpRequest` 對象的狀態改變時，`onreadystatechange` 事件將會被觸發。我們可以通過檢查 `XMLHttpRequest` 對象的 `readyState` 屬性來確定當前請求的狀態。當 `readyState` 的值為 `4`，并且 `status` 的值為 `200` 時，表示請求已成功完成。 接下來，我們需要在 PHP 文件中處理接收到的圖片文件。我們可以使用 `$_FILES` 全局變量來獲取上傳的圖片文件的信息。然后，我們可以將圖片文件保存在服務器的特定目錄下，使用 `move_uploaded_file()` 函數實現。最后，我們需要將保存的圖片文件的路徑返回給 JavaScript。 一旦圖片文件的路徑被 JavaScript 接收到，我們就可以使用它來在 HTML 頁面上顯示圖片。我們可以通過創建一個新的 `img` 元素，并設置其 `src` 屬性為圖片文件的路徑來實現。這樣，用戶就可以在上傳圖片之后立即看到他們選擇的圖片在頁面上的顯示。 總之，通過 AJAX 圖片上傳，我們可以為用戶提供一種方便、實時的上傳圖片的方式。用戶只需選擇圖片文件，然后點擊上傳按鈕，就能在頁面上看到他們選擇的圖片。無需刷新網頁，無需等待上傳完成。這種技術在社交媒體、電子商務和博客等網站中非常有用，可以增強用戶體驗，提升網站功能。