家好，今天我們來聊聊一個非常實用的小技巧——如何用JavaScript檢測用戶上傳的圖片的寬度和高度。這在我們開發中非常常見，比如說，我們要限制用戶上傳頭像的尺寸，或者是對商品圖片進行尺寸檢查。這些場景都要求我們在前端就能搞定圖片尺寸的檢測，避免用戶上傳不符合要求的圖片。

業務需求：用戶頭像上傳

想象一下，你正在開發一個用戶頭像上傳的功能。我們希望用戶上傳的頭像不能超過100x100像素，這樣可以確保頭像在頁面上顯示得清晰又美觀。那我們該怎么實現呢？

解決方案：FileReader和Image對象

不用擔心，JavaScript提供了非常方便的FileReader和Image對象，可以幫助我們輕松實現這個功能。具體步驟如下：

1. 獲取文件輸入框：首先，我們需要獲取到用戶選擇的文件。
2. 讀取文件內容：然后，通過FileReader對象讀取文件內容。
3. 創建圖片對象：接下來，用Image對象加載讀取到的文件。
4. 檢測圖片尺寸：最后，通過Image對象獲取圖片的寬度和高度，并進行判斷。

實現代碼

我們來看看具體的實現代碼：

const fileUpload = document.querySelector('input[type="file"]');
const reader = new FileReader();

fileUpload.addEventListener('change', () => {
  reader.readAsDataURL(fileUpload.files[0]);
  reader.onload = (e) => {
    const image = new Image();
    image.src = e.target.result;
    image.onload = () => {
      const { height, width } = image;
      if (height > 100 || width > 100) {
        alert("上傳的圖片尺寸過大，請選擇100x100像素以內的圖片。");
      } else {
        alert("圖片上傳成功！");
      }
    };
  };
});

代碼解析

1. 獲取文件輸入框：document.querySelector('input[type="file"]')選擇了頁面上的文件輸入框。
2. 創建FileReader實例：通過new FileReader()創建了一個FileReader對象。
3. 添加事件監聽器：fileUpload.addEventListener('change', () => { ... })監聽文件輸入框的變化事件，當用戶選擇文件時觸發。
4. 讀取文件內容：reader.readAsDataURL(fileUpload.files[0])讀取用戶選擇的文件，并轉換為Data URL格式。
5. 創建Image對象：在FileReader讀取完成后，通過new Image()創建一個圖片對象，并將其src屬性設置為讀取到的文件內容。
6. 檢測圖片尺寸：當圖片加載完成后，通過image.onload事件獲取圖片的寬度和高度，并進行尺寸判斷。

結束

通過以上步驟，我們可以輕松實現對用戶上傳圖片尺寸的檢測。這不僅提高了用戶體驗，還能確保上傳的圖片符合我們的要求。希望這個小技巧能對你有所幫助，趕緊在你的項目中試試吧！

了第一節課的基礎，大家對頁面有了初步得認識，具體怎么實現頁面添加圖片呢？

首先需要有圖片存在于我們的工程項目中，直接復制粘貼到我們的項目中，最好在項目中單獨建一個文件夾img用來放圖片，把圖片直接粘貼到img文件中。

然后找到需要放圖片的位置，實現代碼，具體如下<img src=“圖片路徑” alt=“” width=“” />

代碼中src指圖片具體在什么位置；

alt是指圖片加載不出來，顯示的文字，用于解釋說明圖片是干什么用的。

width是指圖片的寬度，調整圖片大小的。