HTML表单仅提供轻量文件类型和大小提示，可靠限制必须由后端实现；前端通过accept属性优化选择器、JS校验大小与扩展名提升体验；后端须校验文件头、清理文件名并配置安全上传环境。
HTML表单本身不能真正限制文件类型和大小，它只提供基础提示与轻量拦截能力。真正可靠的限制必须由后端完成，前端的作用是提升体验、减少无效请求。
用 accept 属性提示允许的文件类型
accept 是 的 HTML 属性，用于告诉浏览器“建议用户选择哪些类型的文件”。它不会阻止用户手动绕过，但能优化原生文件选择器界面：
- 按 MIME 类型写：如
accept="image/jpeg,image/png"或通配accept="image/*" - 按扩展名写（更直观）：如
accept=".pdf,.docx,.xlsx"，注意点号不能省略 - 可混合使用：
accept="image/*,.pdf" - 多个值用英文逗号分隔，前后不加空格
用 JavaScript 检查文件大小与扩展名
用户选完文件后，可通过监听 change 事件读取 input.files[0]，做即时校验：
- 查大小：用
file.size（单位是字节），例如限制 5MB →file.size > 5 * 1024 * 1024 - 查扩展名：用
file.name.split('.').pop().toLowerCase()，比file.type更可靠（因为 type 可能为空或被伪造） - 阻止提交：校验失败时调用
event.preventDefault()，并给出明确提示 - 支持自定义限制：可在 input 上加
data-max-size="10485760"，JS 动态读取该值校验
后端必须严格校验真实文件类型
前端所有检查都可被绕过——用户改后缀名、伪造 type、禁用 JS 都能上传恶意文件。后端需：
- 解析文件头（魔数），而非依赖扩展名或 HTTP 声明的 MIME 类型
- 使用安全库（如 Python 的
python-magic、Node.js 的file-type）识别真实类型 - 清理文件名：去除路径、特殊字符，避免目录遍历（如
../../etc/passwd） - 限制上传目录不可被 Web 直接访问，防止执行脚本
- 设置服务器级大小上限（如 Nginx 的
client_max_body_size，Flask 的MAX_CONTENT_LENGTH）
表单结构不能少的关键配置
即使加了各种限制，若表单基础配置错误，文件根本传不到后端：
-
method必须为post -
enctype必须设为multipart/form-data -
input必须有name属性，后端靠它定位文件字段 - 如需多文件，加上
multiple属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
