在表单提交前检查文件类型，最直接的办法是监听表单的 submit 事件，在回调中通过 event.preventdefault() 拦截默认提交行为，并读取 <input type="file"> 元素中的 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）、类型
立即学习“Java免费学习笔记（深入）”；
<form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" id="fileInput" name="document" accept="image/*" />
<button type="submit">上传</button>
</form>
<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('文件 ' + files[i].name + ' 类型不被允许');
isValid = false;
break;
}
}
if (!isValid) {
event.preventDefault(); // 阻止表单提交
}
});
</script>如何处理多文件上传时的类型校验
当表单支持多文件上传时（即 <input> 带有 multiple 属性），files 属性会返回一个 FileList 对象。此时不能只检查第一个文件，而必须遍历整个列表。任何非合规文件都应立即中断检查并阻止提交，以确保数据一致性。
在实际开发中，建议将校验逻辑封装为独立函数，以便在多个场景下复用。同时，为了提升用户体验，可以在阻止提交后高亮显示错误的输入框，而不是仅仅弹出警告框。此外，虽然前端校验能拦截大部分错误请求，但后端仍需进行同样的校验，以防止恶意绕过。
