input type="file" 加 required 属性可强制用户至少选择一个文件，但需配合 method="POST" 和 enctype="multipart/form-data" 才生效；若提交无提示，常因按钮类型错误或 JS 跳过校验；multiple 与 required 共用时仅要求至少选一个，且需注意旧版 Safari 及 Android WebView 兼容性问题；服务端必须二次校验，因前端校验易被绕过。
input type="file" 加 required 就生效
只要在 <input type="file"> 标签上加 required 属性，浏览器就会强制用户至少选一个文件才能提交表单。它不校验文件内容、大小或类型，只判断是否“有选择”。
常见错误是漏掉表单关键配置——required 单独存在没用，必须配合：
-
method="POST"（GET 不支持文件上传） -
enctype="multipart/form-data"（否则文件数据根本不会发出去）
示例正确写法：
<form action="/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="avatar" required> <button type="submit">上传头像</button> </form>
为什么点了提交却没提示、直接发空请求？
典型现象：用户没选文件，点提交后页面刷新或跳转，后端收到空字段——说明 required 没起作用。
立即学习“前端免费学习笔记（深入）”；
原因往往不是属性写错了，而是触发方式绕过了原生校验：
- 用了
<button type="button">或 JS 绑定click后手动调form.submit()，这会完全跳过校验 - 表单的
submit事件里写了event.preventDefault()，但没补form.checkValidity() - 框架封装了
<input type="file">（如某些 React UI 库），required被隔离或未透传到真实 DOM
修复办法：改用 <button type="submit">；或 JS 提交前加判断：
if (!form.checkValidity()) {
form.reportValidity(); // 弹出浏览器默认提示
return;
}
form.submit();
multiple 和 required 一起用要注意什么
required 对 <input type="file" multiple> 的含义是“至少选一个”，不是“必须选满多个”。这点很直观，但容易被测试忽略。
真正容易踩坑的是兼容性细节：
- 旧版 Safari（iOS 14.5 之前）对
multiple + required的组合支持不稳定，有时选一个再取消，状态没重置，导致后续无法提交 - Chrome 和 Firefox 在用户点击“取消选择”后，
input.files.length变为 0，required正常触发；但某些 Android WebView 会残留一个空 File 对象，使校验失效 - 不要依赖
input.value === ""判断是否为空——它在不同浏览器中返回值不一致（有的返回路径，有的为空字符串），应始终用input.files.length === 0
服务端必须二次校验空文件字段
前端 required 是纯体验层防护，删掉 HTML 属性、用 curl 发请求、甚至禁用 JS，都能绕过。后端收到的可能是：
- 字段完全缺失（
request.files.get("avatar")为None） - 字段存在但
files为空列表（如 Flask 中request.files.getlist("avatar") == []） - 用户上传了一个 0 字节的空文件（需额外检查
.filename和.size）
关键逻辑不能只判 if not file，而要明确区分“没传字段”“传了空文件”“传了有效文件”。尤其注意：Nginx 默认会拦截超大文件并返回 413，此时后端根本收不到请求，required 的语义在这里已彻底失效。
