AJAX（Asynchronous JavaScript and XML）是一種無需重載整個網頁的技術，可以在網頁上異步地發送和接收數據。在上傳圖片時，我們通常希望能夠限制圖片的大小，以減少服務器的負荷和提高用戶體驗。本文將介紹如何使用 AJAX 控制上傳圖片的大小，并且通過舉例說明其具體應用。通過這種方式，我們可以在客戶端對上傳的圖片進行實時檢查，避免不必要的數據傳輸和服務器端的處理。

首先，我們需要使用 HTML5 提供的文件上傳控件（input type="file"）實現圖片的選擇和上傳。然后，通過 JavaScript 獲取到用戶選擇的圖片文件，使用 FileReader 對象讀取圖片的內容。在讀取圖片之后，我們可以通過該對象獲取到圖片的大小，從而進行大小限制的判斷。

上述代碼中，我們通過事件監聽（addEventListener）的方式綁定了文件上傳控件的 change 事件。當用戶選擇了圖片文件后，會觸發對應的回調函數。在回調函數中，我們使用 FileReader 對象讀取圖片文件（reader.readAsDataURL(file)），并創建 Image 對象加載圖片內容。然后，可以通過 image.size 屬性獲取到圖片的大小。

在實際應用中，我們可以根據需求對圖片大小進行自定義的限制。例如，我們希望限制圖片的最大大小為1MB，即1024KB。如果用戶選擇了超過該大小的圖片文件，上述代碼會彈出一個提示框，并清空文件上傳控件的值，以便用戶重新選擇合適大小的圖片。

除了限制圖片大小，我們還可以通過 AJAX 控制上傳圖片的尺寸。例如，我們希望上傳的圖片在后臺服務器中展示時，不超過500px × 500px 的尺寸。在上述代碼的基礎上，我們可以添加尺寸限制的判斷。

上述代碼在圖片大小限制的判斷之后，添加了圖片尺寸的判斷。如果用戶選擇了超過 500px × 500px 的圖片文件，代碼會彈出一個提示框，并清空文件上傳控件的值，以便用戶重新選擇適合尺寸的圖片。

通過以上的例子，我們可以看到 AJAX 可以在客戶端對上傳圖片的大小進行控制，從而減輕服務器的負荷和提高用戶的體驗。根據實際需求，我們可以自定義限制條件，并通過 JavaScript 對圖片的大小和尺寸進行判斷。這種方式能夠在用戶選擇文件時實時反饋結果，避免不必要的數據傳輸和服務器端的處理，提高了上傳圖片的效率和交互性。