如何使用JavaScript在图片上传前额外校验图片的最大宽度与高度

你可以通过Image对象加载选中的图片文件读取原始宽高，和现有校验逻辑整合即可，以下是完整修改后的代码：

完整JS代码 #

// 注意：原代码同时写了行内onchange和addEventListener，保留一种即可，这里去掉了重复绑定
document.getElementById("files").addEventListener("change", validateFile)

function validateFile(){
  const allowedExtensions =  ['jpg'],
        sizeLimit = 150000,
        // 自定义最大宽高阈值，可根据需求修改数值
        maxWidth = 1920,
        maxHeight = 1080; 
        
  const file = this.files[0];
  // 未选中文件直接返回
  if(!file) return;

  const { name:fileName, size:fileSize } = file;
  const fileExtension = fileName.split(".").pop();

  // 扩展名校验
  if(!allowedExtensions.includes(fileExtension)){
    alert("图片格式不符合要求，仅支持jpg格式");
    this.value = null;
    return;
  }
  // 文件大小校验
  if(fileSize > sizeLimit){
    alert("图片大小超出限制，最大支持150KB");
    this.value = null;
    return;
  }

  // 宽高校验逻辑
  const img = new Image();
  const objectUrl = URL.createObjectURL(file);
  img.onload = function() {
    // 读取图片原始宽高，不受样式缩放影响
    const { naturalWidth: width, naturalHeight: height } = img;
    // 销毁临时地址释放内存
    URL.revokeObjectURL(objectUrl);
    // 宽高规则校验
    if(width > maxWidth || height > maxHeight){
      alert(`图片尺寸超出限制，最大支持${maxWidth}px * ${maxHeight}px`);
      document.getElementById("files").value = null;
      return;
    }
    // 所有校验通过后可在这里写后续上传逻辑
  }
  img.onerror = function() {
    // 加载失败说明文件不是合法图片
    alert("请上传有效的图片文件");
    document.getElementById("files").value = null;
    URL.revokeObjectURL(objectUrl);
  }
  img.src = objectUrl;
}

HTML代码 #

<input type="file" id="files" class="box_file">

逻辑说明 #

• 用URL.createObjectURL将选中的文件生成临时访问地址，赋值给Image对象的src属性加载图片
• 图片加载完成后通过naturalWidth和naturalHeight读取原图真实宽高，避免样式缩放导致的尺寸读取错误
• 校验完成后调用URL.revokeObjectURL销毁临时地址，避免内存泄漏
• 额外增加了图片加载失败的异常处理，避免篡改扩展名的非图片文件绕过校验

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