html文件上传控件仅提供客户端提示与初步拦截，accept属性提示类型、javascript检查大小、后端校验才是唯一可靠防线；需在web服务器、框架中间件、语言运行时三层设硬限制，并校验文件内容而非仅信扩展名或type。
HTML 文件上传控件本身不能真正“限制”文件格式和大小，它只能提供客户端提示与初步拦截。核心原则是：accept 属性管类型提示，JavaScript 管大小初检，后端校验才是唯一可靠防线。
用 accept 属性提示支持的图片等文件类型
在 <input type="file"> 中设置 accept，可让浏览器在文件选择对话框中优先显示匹配类型的文件（如 Chrome、Edge 会过滤，iOS Safari 效果较弱）：
- 推荐写法：使用标准 MIME 类型，逗号分隔，不加空格
<input type="file" accept="image/jpeg,image/png,image/gif,image/webp"> - 可辅助加扩展名增强感知（非必需，仅部分浏览器识别）
<input type="file" accept="image/jpeg,image/png,.jpg,.jpeg,.png"> - 避免错误写法：
accept=".jpg,.png"（无 MIME，兼容性差）、accept="image/jpg"（非标类型）、accept="image/*,.pdf"（通配符混用易失控）
用 JavaScript 在选中时检查文件大小
必须监听 change 事件，在用户选完文件后立刻读取 files[0].size（单位为字节），并做拦截提示：
- 示例：限制单图不超过 5MB
const maxSize = 5 * 1024 * 1024; - 检查后若超限，除提示外一定要清空 input 值：
e.target.value = ''，否则同名文件重复选不会再次触发 change - 建议加兜底判断：
if (!file || !file.size)，防止 Safari 或 WebView 返回 size 为 0 - 可用
data-max-size属性实现每个控件独立配置，比如：<input type="file" data-max-size="2097152">，JS 中用Number(input.getAttribute('data-max-size'))读取
后端必须严格校验，不可跳过
前端所有限制都可被绕过（禁用 JS、curl 直传、修改 DOM）。服务端需在三层设硬限制：
-
Web 服务器层：如 Nginx 配置
client_max_body_size 20M;，防止超大请求直接 413 -
框架/中间件层：如 Node.js + multer 设置
limits: { fileSize: 20 * 1024 * 1024 } -
语言/运行时层：如 PHP 调大
upload_max_filesize和post_max_size（后者 ≥ 前者） - 同时校验文件内容（如读取文件头判断真实 MIME），而非只信
file.type或扩展名
补充：提升体验的小技巧
不是强制限制，但能减少用户误操作：
- 配合
multiple控制是否允许多选；加capture="environment"在移动端调用后置摄像头 - 用
FileReader实现图片本地预览，让用户确认所选内容 - 对图像类文件，可在前端用 Canvas 预压缩并估算体积，提前拦截明显超限的原图
- 按文件类型差异化设限：图片 5MB、PDF 20MB、视频 100MB，通过
file.type分支判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
