JavaScript表单多文件上传数量校验失效问题求助

问题原因 #

• 你在文件选择的change事件里仅做了告警和返回操作，没有清空不符合规则的已选文件，异常文件会一直保留在文件输入框中，提交表单时会被正常读取上传
• 表单提交逻辑addPizza中没有二次校验文件数量，校验逻辑和提交逻辑完全脱节，无法阻止不符合规则的提交
• 原有校验逻辑没有兼容「图片非必填」的需求，即使用户没有选择任何图片也会触发告警，不符合需求规则

修复方案 #

1. 修改文件选择校验逻辑 #

修改后的代码会在校验不通过时清空已选文件，同时兼容非必填规则，同时修复了原代码缺少事件监听闭合括号的语法问题：

const input = document.querySelector('#images');

input.addEventListener('change', (e) => {
  const files = input.files;
  // 没选文件直接跳过校验
  if (files.length === 0) return;
  if (files.length < 3 || files.length > 10) {
    alert(`如果上传图片，仅允许选择3-10个文件`);
    // 清空不符合要求的已选文件
    input.value = '';
    return;
  }
});

2. 表单提交逻辑新增文件校验 #

在addPizza函数的必填项校验后增加文件数量校验，双重保证规则生效：

let pizzas = [];

const addPizza = (ev) => {
  ev.preventDefault();
  // 原有必填项校验逻辑保留
  if (document.getElementById("name").value.length == 0 || document.getElementById("heat").value.length == 0 || document.getElementById("price").value.length == 0 ||
    document.getElementById("toppings1").value.length == 0 || document.getElementById("toppings2").value.length == 0) {
    alert("请填写必填字段");
    return;
  }
  // 新增文件数量校验
  const imgInput = document.getElementById('images');
  const fileCount = imgInput.files.length;
  if (fileCount > 0 && (fileCount < 3 || fileCount > 10)) {
    alert(`如果上传图片，仅允许选择3-10个文件`);
    return;
  }
  // 原有保存逻辑保留
  let pizza = {
    pizzaName: document.getElementById('name').value,
    pizzaPrice: document.getElementById('price').value,
    pizzaHeat: document.getElementById('heat').value,
    pizzatoppings1: document.getElementById('toppings1').value,
    pizzatoppings2: document.getElementById('toppings2').value,
    pizzatoppings3: document.getElementById('toppings3').value,
    pizzatoppings4: document.getElementById('toppings4').value,
    pizzatoppings5: document.getElementById('toppings5').value,
    pizzaImages: document.getElementById('images').value,
  }
  pizzas.push(pizza);
  document.querySelector('form').reset();
  console.warn('added', {
    pizzas
  });
  sessionStorage.setItem('MyPizzaList', JSON.stringify(pizzas));
}

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('btn').addEventListener('click', addPizza);
});

额外注意事项 #

你当前存储的pizzaImages是文件输入框的value值，仅包含选中文件的本地文件名，不会存储文件本身的内容，如果需要持久化存储图片内容，需要将图片转为Base64格式后再存入sessionStorage。

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