HTML表单仅提供轻量文件类型和大小提示，可靠限制必须由后端实现；前端通过accept属性优化选择器、JS校验大小与扩展名提升体验；后端须校验文件头、清理文件名并配置安全上传环境。

HTML表单本身不能真正限制文件类型和大小，它只提供基础提示与轻量拦截能力。真正可靠的限制必须由后端完成，前端的作用是提升体验、减少无效请求。

用 accept 属性提示允许的文件类型

accept 是 <input type="file"> 的 HTML 属性，用于告诉浏览器“建议用户选择哪些类型的文件”。它不会阻止用户手动绕过，但能优化原生文件选择器界面：

• 按 MIME 类型写：如 accept="image/jpeg,image/png" 或通配 accept="image/*"
• 按扩展名写（更直观）：如 accept=".pdf,.docx,.xlsx"，注意点号不能省略
• 可混合使用：accept="image/*,.pdf"
• 多个值用英文逗号分隔，前后不加空格

用 JavaScript 检查文件大小与扩展名

用户选完文件后，可通过监听 change 事件读取 input.files[0]，做即时校验：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 查大小：用 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 属性