JavaScript上传前校验图片尺寸遇naturalWidth/Height为undefined求助

我一眼就看出你大概率踩了两个常见坑之一，咱们一步步把问题捋清楚：

核心问题分析 #

你代码里的document.getElementById('destImage')如果是**<input type="file">上传控件**，那它本身是表单元素，根本没有naturalWidth/naturalHeight属性——这是图片元素（<img>）才有的专属属性！另外就算你用的是<img>标签，如果图片还没加载完成就读取尺寸，也会返回undefined。

针对上传场景的完整解决方案 #

假设你的页面是常见的上传布局：

<input type="file" id="destImage" accept="image/*">
<button id="destSubmit">提交</button>
<!-- 加个隐藏的img用来加载本地图片，不影响页面布局 -->
<img id="hiddenImg" style="display: none;">

修改你的JavaScript代码，确保先加载图片再读取真实尺寸：

$('#destSubmit').click(function(e) {
  // 先阻止默认提交行为，避免校验前就提交了表单
  e.preventDefault();
  
  const fileInput = document.getElementById('destImage');
  // 先检查用户有没有选择文件
  if (!fileInput.files || fileInput.files.length === 0) {
    alert('请先选择要上传的图片！');
    return;
  }
  
  const selectedFile = fileInput.files[0];
  // 校验文件类型是否为图片
  if (!selectedFile.type.startsWith('image/')) {
    alert('请选择有效的图片文件！');
    return;
  }
  
  const hiddenImg = document.getElementById('hiddenImg');
  // 将本地文件转成可加载的Blob URL
  const imgUrl = URL.createObjectURL(selectedFile);
  
  // 必须等图片加载完成后，才能读取真实尺寸
  hiddenImg.onload = function() {
    const width = this.naturalWidth;
    const height = this.naturalHeight;
    console.log(`width: ${width} || Height: ${height}`);
    
    // 执行尺寸校验
    if (width !== 100 || height !== 100) {
      alert('图片尺寸必须是100x100像素！');
      // 释放Blob URL，避免内存泄漏
      URL.revokeObjectURL(imgUrl);
      return;
    }
    
    // 尺寸符合要求，继续提交逻辑
    alert('图片尺寸校验通过，准备提交！');
    // 示例：触发表单提交
    // $('#yourFormId').submit();
    // 记得释放Blob URL
    URL.revokeObjectURL(imgUrl);
  };
  
  // 给隐藏img赋值地址，触发图片加载
  hiddenImg.src = imgUrl;
});

如果你确实用的是<img>元素（比如预加载图片） #

如果你的#destImage是<img>标签，那问题就是图片还没加载完成就读取尺寸了，解决方法是监听onload事件：

$('#destSubmit').click(function(e) {
  e.preventDefault();
  const img = document.getElementById('destImage');
  
  // 先判断图片是否已经加载完成
  if (img.complete) {
    checkImageSize(img);
  } else {
    // 未加载完成，等加载完毕再校验
    img.onload = function() {
      checkImageSize(this);
    };
  }
});

// 抽离校验逻辑，代码更清晰
function checkImageSize(img) {
  const width = img.naturalWidth;
  const height = img.naturalHeight;
  console.log(`width: ${width} || Height: ${height}`);
  
  if (width !== 100 || height !== 100) {
    alert('图片尺寸必须是100x100像素！');
    return;
  }
  
  // 尺寸合格，执行后续操作
  alert('尺寸校验通过！');
  // $('#yourFormId').submit();
}

额外注意事项 #

• 一定要用naturalWidth/naturalHeight，不要用width/height——后者可能是CSS设置的显示尺寸，不是图片本身的真实分辨率。
• 使用URL.createObjectURL()后，务必用URL.revokeObjectURL()释放内存，避免内存泄漏。
• 增加用户友好的异常提示（比如未选文件、文件类型错误），提升交互体验。

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