input file控件为空时自定义文件校验函数无法运行问题咨询

问题诱因 #

• 当文件上传控件未选择任何文件时，document.getElementById("file").files 得到的FileList对象长度为0，直接访问files[0]会返回undefined，后续读取undefined.type时会直接抛出JS类型错误，导致整个函数中断执行，这就是校验不触发的核心原因。
• 原有逻辑的判断顺序错误：你将「未选择文件」的判断放在了读取文件类型之后，就算不报错，fileTypecheck.length == 0 也无法匹配到未选择文件的场景，该判断只能匹配到读取到的文件类型为空的极端特殊情况。

修复方案 #

先判断文件列表长度，未选择文件时直接走合法逻辑，选中文件时再校验类型：

function myFunction() {
  const fileInput = document.getElementById("file");
  // 先判断是否未选择文件
  if (fileInput.files.length === 0) {
    alert("File is png or 0");
    return;
  }
  // 选中文件时再读取类型校验
  const fileTypecheck = fileInput.files[0].type.replace(/(.*)\//g, '');
  if(fileTypecheck == "png"){
    alert("File is png or 0");
  }else{
    alert("File is NOT png or 0");
  }
}

补充说明：input标签的accept="image/png"仅为系统文件选择窗口的过滤规则，用户可以手动修改选择范围上传其他格式文件，前端校验不能替代后端格式校验，上线时必须补充后端校验逻辑。

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