JavaScript多文件Input上传校验：验证同时含Word(doc/docx)与PDF文件

完全可以通过原生JavaScript实现该校验逻辑，不需要引入任何第三方库。

• 监听配置了multiple属性的文件上传控件的change事件，在用户完成文件选择后触发校验流程
• 维护两个布尔状态标记，分别记录选中文件中是否存在Word格式（.doc/.docx）文件、是否存在PDF格式（.pdf）文件
• 遍历用户选中的文件列表，逐个提取文件名后缀做匹配，命中对应格式时更新状态标记
• 遍历结束后校验两个状态标记是否同时为真：如果不满足则提示用户规则、清空已选的无效文件；如果满足则执行后续上传流程

首先是上传控件的基础HTML结构：

<!-- 多文件上传控件，accept仅做选择窗口的默认过滤，不能替代校验 -->
<input type="file" id="fileUpload" multiple accept=".doc,.docx,.pdf">
<p id="errorTip" style="color: red; display: none;"></p>

对应的JavaScript校验逻辑：

const fileInput = document.getElementById('fileUpload');
const errorTip = document.getElementById('errorTip');

fileInput.addEventListener('change', function(e) {
  const selectedFiles = e.target.files;
  // 重置校验状态和错误提示
  let hasWordFile = false;
  let hasPdfFile = false;
  errorTip.style.display = 'none';

  if (selectedFiles.length === 0) return;

  for (const file of selectedFiles) {
    // 文件名统一转小写，避免大写后缀导致校验失效
    const lowerFileName = file.name.toLowerCase();
    if (lowerFileName.endsWith('.doc') || lowerFileName.endsWith('.docx')) {
      hasWordFile = true;
    }
    if (lowerFileName.endsWith('.pdf')) {
      hasPdfFile = true;
    }
    // 两类文件都已命中时提前终止遍历，减少不必要的计算
    if (hasWordFile && hasPdfFile) break;
  }

  // 校验不通过的处理
  if (!hasWordFile || !hasPdfFile) {
    errorTip.textContent = '选中文件必须同时包含Word格式（.doc/.docx）文件和PDF格式（.pdf）文件，请重新选择';
    errorTip.style.display = 'block';
    // 清空无效的选中文件
    fileInput.value = '';
    return;
  }

  // 校验通过，此处编写后续文件上传逻辑
  console.log('文件格式校验通过，可执行上传', selectedFiles);
});

• 做后缀匹配时务必先把文件名统一转为小写，避免用户文件后缀为大写（如.DOC、.PDF）时出现校验误判
• 若需要提升校验严谨性，可以在后缀匹配的基础上增加文件MIME类型判断：Word文件对应的MIME值通常为application/msword（.doc）、application/vnd.openxmlformats-officedocument.wordprocessingml.document（.docx），PDF文件对应的MIME值为application/pdf。注意部分环境下文件MIME值可能为空，因此不要单独依赖MIME值做格式判断
• 前端校验的作用是减少无效请求、提升交互体验，所有格式校验规则必须在服务端重复实现，避免用户绕过前端校验上传不符合要求的文件

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