如何获取浏览器文件输入框选中图片的尺寸，用于客户端上传前校验？

你猜测的用img标签加载图片获取尺寸的思路是完全可行的，也是目前兼容性最好的实现方案，不需要额外插入可见DOM，直接在内存中创建img元素即可完成校验，无需额外处理可见性。

兼容性最佳实现代码（兼容所有主流浏览器） #

该方案适配所有主流浏览器，包含完整的类型校验、尺寸校验逻辑，你可以根据业务需求自行调整尺寸阈值：

const imageUploadInput = document.getElementById("image-upload-input");
// 自定义尺寸阈值，可根据需求修改
const MAX_WIDTH = 1920; // 最大宽度
const MAX_HEIGHT = 1080; // 最大高度
const MIN_WIDTH = 100; // 最小宽度
const MIN_HEIGHT = 100; // 最小高度

imageUploadInput.addEventListener('change', function() {
  const file = this.files[0];
  if (!file) return;
  // 先校验文件类型为图片
  if (!file.type.startsWith('image/')) {
    alert('请选择图片类型的文件');
    return;
  }

  const reader = new FileReader();
  reader.onload = function (event) {
    // 内存中创建img元素，不需要插入页面DOM
    const img = new Image();
    img.onload = function() {
      // 获取原图真实尺寸，不受CSS缩放影响
      const width = img.naturalWidth;
      const height = img.naturalHeight;
      // 尺寸校验
      if (width > MAX_WIDTH || height > MAX_HEIGHT) {
        alert(`图片尺寸过大，最大支持${MAX_WIDTH}*${MAX_HEIGHT}像素`);
        return;
      }
      if (width < MIN_WIDTH || height < MIN_HEIGHT) {
        alert(`图片尺寸过小，最小需要${MIN_WIDTH}*${MIN_HEIGHT}像素`);
        return;
      }
      // 校验通过，执行原上传逻辑
      axios.post("upload/image", Buffer.from(event.target.result));
    }
    img.onerror = function() {
      alert('图片加载失败，请选择有效的图片文件');
    }
    img.src = event.target.result;
  };
  reader.readAsArrayBuffer(file);
})

更优的现代浏览器实现方案 #

如果你的项目不需要兼容IE等老旧浏览器，可以使用createImageBitmap API，性能更好，逻辑更简洁，不需要手动处理FileReader和img元素的加载逻辑：

const imageUploadInput = document.getElementById("image-upload-input");
const MAX_WIDTH = 1920;
const MAX_HEIGHT = 1080;

imageUploadInput.addEventListener('change', async function() {
  const file = this.files[0];
  if (!file) return;
  if (!file.type.startsWith('image/')) {
    alert('请选择图片类型的文件');
    return;
  }
  try {
    // 直接读取文件生成位图对象
    const imgBitmap = await createImageBitmap(file);
    const width = imgBitmap.width;
    const height = imgBitmap.height;
    // 尺寸校验
    if (width > MAX_WIDTH || height > MAX_HEIGHT) {
      alert(`图片尺寸过大，最大支持${MAX_WIDTH}*${MAX_HEIGHT}像素`);
      return;
    }
    // 校验通过，转成ArrayBuffer上传
    const arrayBuffer = await file.arrayBuffer();
    axios.post("upload/image", Buffer.from(arrayBuffer));
  } catch (e) {
    alert('图片解析失败，请选择有效的图片文件');
  }
})

注意事项 #

• 客户端校验仅用于优化用户体验，减少无效上传，服务端必须二次校验图片尺寸，避免用户绕过前端校验上传不符合要求的文件
• 校验逻辑可根据业务需求扩展，比如增加宽高比限制、文件大小限制等规则

内容的提问来源于stack exchange，提问作者kaan_atakan