accept="video/*"是最稳妥写法,兼容所有视频格式;iOS需配合capture属性强制调用摄像头;accept仅为前端提示,后端必须通过二进制头校验真实文件类型。

accept 属性只允许视频上传的正确写法
直接写 accept="video/*" 是最常用也最稳妥的方式,浏览器会过滤掉非视频文件。但要注意,这个限制只是前端提示,不能替代后端校验。
常见错误:用 MIME 类型拼错或过度限定
比如写成 accept="video/mp4,video/avi" 看似精确,实际会导致部分浏览器(尤其是 Safari)无法识别 video/avi(AVI 不是标准 Web 视频 MIME),结果连 MP4 都不显示。更糟的是写 accept=".mp4,.mov" —— 点号开头的扩展名写法在多数现代浏览器中已被弃用或行为不一致。
- ✅ 推荐:
accept="video/*"(兼容性最好,覆盖 MP4、MOV、WebM、AVI 等所有视频类型) - ⚠️ 谨慎:
accept="video/mp4,video/webm,video/quicktime"(需确认目标浏览器支持对应 MIME,Safari 对video/quicktime支持较好,但 Chrome 可能忽略) - ❌ 避免:
accept=".mp4"或accept="video/avi"
移动端 iOS 的特殊表现
iOS Safari 在 input type="file" 上对 accept 的响应较弱,即使设了 video/*,相册里仍可能显示照片选项;但点击「录制视频」后能正常唤起摄像头。这是系统级限制,无法靠 HTML 修复。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 实测有效组合:
<input type="file" accept="video/*" capture="environment">(加capture可强制调用后置摄像头,跳过相册) - 若必须从相册选视频,iOS 16+ 才开始较好支持
video/*过滤,旧版本基本无效 - 不要依赖
accept来阻止用户上传图片——它只是 UI 提示
后端必须校验文件真实类型
前端 accept 可被绕过(比如改 HTML、拖拽文件、curl 上传),后端拿到文件后必须检查二进制头(magic number)或调用 file 命令 / finfo / ffprobe 等工具确认是否真为视频。
立即学习“前端免费学习笔记(深入)”;
- 仅检查扩展名(如
.mp4)不可靠,攻击者可把恶意脚本改成xxx.mp4 - Node.js 示例:用
busboy接收流后,用mmmagic读取前几百字节判断 MIME - Python 示例:用
python-magic替代os.path.splitext()
真正起作用的永远是后端校验,accept 只是减少用户误操作的第一道轻量提示。iOS 和老旧 Android 的兼容差异、MIME 类型的浏览器实现偏差、以及用户主动绕过的可能性,都意味着不能把它当安全边界。


















