在表单提交前检查文件类型，最直接的办法是监听表单的 submit 事件，在回调中通过 event.preventdefault() 拦截默认提交行为，并读取 元素中的 files 列表进行校验。如果所有文件的 mime 类型都在允许范围内，则手动调用 form.submit() 继续提交；否则提示用户错误并保留当前状态。

如何获取并验证单个文件的 MIME 类型

要验证文件类型，需要访问 File 对象的 type 属性。这个属性直接对应文件的 MIME 类型字符串。对于图片文件，通常以 image/ 开头。我们可以编写一个辅助函数，接收文件对象和允许的类型数组，返回布尔值来判断是否合规。

function isAllowedType(file, allowedTypes) {
  return allowedTypes.includes(file.type);
}

// 示例：只允许 PNG 和 JPEG
const allowed = ['image/png', 'image/jpeg'];
const fileInput = document.getElementById('myFile');

if (fileInput.files.length > 0) {
  const file = fileInput.files[0];
  if (!isAllowedType(file, allowed)) {
    alert('不支持的文件类型');
  }
}

上述代码展示了基本的类型检查逻辑。需要注意的是，file.type 是由浏览器根据文件内容或扩展名推断的，并非绝对可靠，但在前端初步过滤中非常有效。接下来我们将把这个逻辑整合到完整的表单处理流程中。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

上传

<script> document.getElementById('uploadForm').addEventListener('submit', function(event) { const fileInput = document.getElementById('fileInput'); const files = fileInput.files; const allowedTypes = ['image/png', 'image/jpeg', 'application/pdf']; let isValid = true; for (let i = 0; i < files.length; i++) { if (!allowedTypes.includes(files[i].type)) { alert('&#25991;&#20214; ' + files[i].name + ' &#31867;&#22411;&#19981;&#34987;&#20801;&#35768;'); isValid = false; break; } } if (!isValid) { event.preventDefault(); // &#38459;&#27490;&#34920;&#21333;&#25552;&#20132; } }); </script>

如何处理多文件上传时的类型校验

当表单支持多文件上传时（即 带有 multiple 属性），files 属性会返回一个 FileList 对象。此时不能只检查第一个文件，而必须遍历整个列表。任何非合规文件都应立即中断检查并阻止提交，以确保数据一致性。

在实际开发中，建议将校验逻辑封装为独立函数，以便在多个场景下复用。同时，为了提升用户体验，可以在阻止提交后高亮显示错误的输入框，而不是仅仅弹出警告框。此外，虽然前端校验能拦截大部分错误请求，但后端仍需进行同样的校验，以防止恶意绕过。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南