html 的 accept 属性仅提示，无法阻止非法文件选择；文件大小限制必须用 js 在 change 事件中检查 file.size 并清空 input.value；multiple 属性是批量上传前提；切片需兼容检测 file.prototype.slice；服务端必须重复校验。
HTML 层面对 input type="file" 的“限制”本质是提示和过滤，不是强制拦截；真正有效的校验必须在 JavaScript 中做，且服务端必须重复验证。
accept 属性只起提示作用，不能阻止非法文件被选中
写 accept="image/*,.pdf" 后，用户仍可通过“所有文件”选项绕过筛选——浏览器只是默认高亮匹配类型，不阻止选择其他后缀或 MIME 的文件。移动端 Safari 尤其弱，基本忽略 accept。所以：
• 不要用 accept 当安全边界
• 不要依赖它来防止大文件或危险类型上传
• 必须在 change 事件里用 file.type 和 file.name 做二次判断
文件大小限制只能靠 JS 检查，max 属性对 file input 无效
HTML 的 max、maxlength 等属性对 type="file" 完全不生效。常见错误是以为加了 max="5242880" 就能卡住 5MB 文件——实际毫无作用。正确做法是：
• 监听 change 事件，遍历 input.files
• 对每个 file 检查 file.size > 5 * 1024 * 1024
• 超限时清空 input.value = ""（否则下次 change 不触发）
• 提示用户并中断后续流程
multiple 属性决定批量处理能力，不开启就无法自然支持多文件切片
没加 multiple 时，input.files 只含一个 File，即使你手动切片也只能处理单个文件，用户每次选完还得点一次按钮——这破坏批量上传体验。加了之后：
• input.files 是 FileList（类数组），需用 length 判断数量
• 每个 files[i] 都是标准 File 实例，可直接调 slice()
• 单个文件的切片逻辑和多文件并行处理可以复用同一套代码
• 注意：不要用 input.value 判断是否选中文件，它只返回文件名（路径被屏蔽），永远用 input.files.length > 0
移动端和旧浏览器的兼容细节容易被忽略
移动端 Safari 对 accept 支持差，部分 Android 浏览器会忽略 capture；IE10+ 才支持 File.slice()，但没 FileReader.prototype.readAsArrayBuffer 就没法传二进制切片。所以：
• 切片前先检查 typeof File !== "undefined" && typeof File.prototype.slice === "function"
• 不要假设 file.type 一定准确（用户可改后缀，MIME 可伪造）
• 大文件上传必须配合服务端分片接收逻辑，前端切片只是第一步
• 用户取消选择或点击“取消”后，input.files 为空，但 input.value 可能残留旧值，需主动重置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
