家好，今天我们来聊聊一个非常实用的小技巧——如何用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是指图片的宽度，调整图片大小的。