图片无法正常加载：Object URL加载图片未触发onload事件求助

你的问题核心在于图片加载是异步操作，再加上表单提交的流程干扰，导致你既无法获取正确的图片尺寸，也看不到onload/onerror事件触发。我来一步步拆解问题并给出修复方案：

为什么会出现这个问题？ #

1. 异步加载的顺序错误：你在设置img.src后立刻检查img.width和img.height，但图片从Blob转换为可访问的图像需要时间，这时候图片还没开始加载，自然只能拿到默认的0值。
2. 表单提交的干扰：当你点击提交按钮，浏览器会立刻执行checkData函数，如果你在函数里很快return false（因为宽高检查失败），浏览器可能会直接回收你创建的Image对象，导致它的加载流程被中断，所以onload和onerror事件都没机会触发。

修复后的代码 #

HTML部分（调整表单提交逻辑） #

<form method="POST" name="Form" action="">
  Image 1 <input type="file" name="img"><br>
  <input type="submit" value="check">
</form>

JavaScript部分（改用异步方式处理） #

// 给表单绑定提交事件，用事件监听替代inline onsubmit
document.querySelector('form[name="Form"]').addEventListener('submit', function(e) {
  // 先阻止表单默认提交行为，等图片校验完成后再决定是否提交
  e.preventDefault();
  
  const fileInput = document.getElementsByName('img')[0];
  // 先检查用户是否选择了文件
  if (!fileInput.files || fileInput.files.length === 0) {
    alert('请选择一张图片');
    return;
  }

  const img = new Image();
  img.onload = function() {
    // 图片加载完成后再检查尺寸
    if (img.width === 385 && img.height === 345) {
      alert('图片尺寸符合要求，即将提交表单');
      // 尺寸正确，手动提交表单
      document.querySelector('form[name="Form"]').submit();
    } else {
      alert(`错误的尺寸：当前尺寸为 ${img.width}x${img.height}，要求为385x345`);
    }
    // 释放Object URL占用的内存
    URL.revokeObjectURL(img.src);
  };
  img.onerror = function(e) {
    console.error('图片加载失败', e);
    alert('无法加载所选文件，请确认是有效的图片格式');
    URL.revokeObjectURL(img.src);
  };

  // 设置图片源，触发异步加载
  img.src = URL.createObjectURL(fileInput.files[0]);
});

关键修改点说明 #

• 阻止默认提交：先通过e.preventDefault()暂停表单提交，等图片校验完成后再手动提交或提示错误，避免图片对象被提前回收。
• 异步校验逻辑：把尺寸检查放在onload事件回调里，确保只有当图片完全加载完成后才获取真实的宽高值。
• 内存优化：在图片加载完成（无论成功或失败）后调用URL.revokeObjectURL，释放Blob URL占用的浏览器内存，避免内存泄漏。
• 边界检查：增加了用户未选择文件的判断，避免出现undefined的错误。

内容的提问来源于stack exchange，提问作者J.C