JavaScript异步校验Input上传图片比例问题求助

看起来你遇到的核心问题是异步操作无法同步阻止表单提交——你的checkRequirements是同步函数，里面调用processFile返回的Promise会在函数执行完之后才resolve，所以then里的return false根本不会让checkRequirements返回false，表单早就提交了。另外你的代码里还有一个关键bug：创建Image后没有设置src，导致图片永远不会加载，onload事件永远不会触发。

下面是完整的修正方案：

1. 修复processFile和getReader函数 #

首先补全图片加载的关键步骤，同时简化异步逻辑：

// 获取文件并转为DataURL
function getReader() {
  const file = document.getElementById("share_file").files[0];
  if (!file) {
    return Promise.reject(new Error("请先选择图片文件"));
  }
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error("文件读取失败"));
    reader.readAsDataURL(file);
  });
}

// 异步校验图片比例
async function processFile() {
  try {
    const imageDataUrl = await getReader();
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => {
        const ratio = img.width / img.height;
        // 校验宽高比是否在1.90-1.92之间（包含边界值）
        const isValidRatio = ratio >= 1.90 && ratio <= 1.92;
        resolve(isValidRatio);
      };
      img.onerror = () => reject(new Error("图片加载失败，请确认文件格式正确"));
      // 关键：设置图片src，触发加载
      img.src = imageDataUrl;
    });
  } catch (err) {
    console.error(err);
    alert(err.message);
    return false;
  }
}

2. 改用表单submit事件处理异步校验 #

由于onclick是同步触发的，无法等待异步操作完成，我们需要监听表单的submit事件，先阻止默认提交，等异步校验完成后再决定是否提交表单：

第一步：修改提交按钮，移除onclick属性 #

<input id="saveAndStay" type="submit" name="buttonSaveAndStay">

第二步：添加表单提交事件监听 #

// 获取你的表单元素（假设表单name是editWeb，和你代码里的document.editWeb对应）
const form = document.editWeb;

form.addEventListener("submit", async (event) => {
  // 先阻止表单默认提交行为
  event.preventDefault();

  // 判断是否需要校验图片
  const needCheckImage = document.editWeb.radio_share[1].checked || document.editWeb.radio_share[2].checked;

  if (needCheckImage) {
    try {
      const isRatioValid = await processFile();
      if (!isRatioValid) {
        alert("此图片比例不正确，请上传宽高比在1.90-1.92之间的图片");
        return; // 校验不通过，终止提交
      }
    } catch (err) {
      alert("图片校验出错：" + err.message);
      return; // 出错时也终止提交
    }
  }

  // 所有校验通过，手动提交表单
  form.submit();
});

关键知识点解释 #

• async/await：让异步代码看起来像同步代码，await会等待Promise完成后再继续执行后面的代码。
• 表单submit事件：通过event.preventDefault()阻止默认提交，等待异步校验完成后，再调用form.submit()手动提交。
• 图片加载：必须设置img.src才能触发onload事件，这是你原来代码里遗漏的核心步骤。

这样修改后，就能在图片比例不符合要求时阻止表单提交，并提示用户了。

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