文件上传需手动添加二次确认机制，推荐用自定义模态框+状态锁实现；onsubmit中preventdefault后控制isuploadconfirmed标志位，配合按钮禁用与国际化支持，确保防重复、可恢复、流程完整。
文件上传本身不带二次确认机制，必须手动加逻辑拦截——不是靠 accept 或表单属性，而是靠在触发上传前插入用户确认环节，并阻断默认行为。
onsubmit 里用 confirm() 最快但有硬伤
给 <form></form> 加 onsubmit="return confirm('确定上传？')" 能立刻生效，回车提交、按钮点击、form.submit() 全覆盖。但它弹出的是浏览器原生对话框：iOS 上可能卡住渲染，不能改文字、加图标，也没法做中文多语言切换。
- 别写在按钮的
onclick上，否则回车提交会绕过确认 - 如果表单用了
enctype="multipart/form-data"，confirm() 不影响文件字段读取，但用户点“取消”后event.preventDefault()必须生效，否则仍可能发空请求 - 某些老版 Safari 对
confirm()在 file input 后的响应有延迟，建议加 100ms 微延迟再判断
自定义模态框 + 状态锁才是生产环境做法
要样式可控、支持国际化、防重复点击，就得用 DOM 模态框 + 标志位控制流程。核心是不让表单真正提交，直到用户点“确定”且状态标记就绪。
- 给
<form></form>绑定onsubmit事件，第一件事是event.preventDefault() - 设一个
let isUploadConfirmed = false，首次提交时显示模态框，用户点“确定”才设为true并调form.submit() - 模态框的“取消”或遮罩层点击，必须重置
isUploadConfirmed = false，否则刷新页面前无法再次触发确认 - 按钮点击后立即
button.disabled = true或加 loading class，防止用户连点两次弹出两个模态框
file input 的 change 事件也能拦，但只管选择不管提交
如果你的上传是 JS 驱动（比如用 FormData + fetch），那就在 input[type="file"].onchange 里做确认更自然。它比 form submit 更早介入，能提前拒绝无效选择。
- 检查
event.target.files.length === 0就直接 return，省得进模态框 - 可结合
accept属性做初步过滤，但记住：用户切到“所有文件”就能绕过，确认逻辑不能依赖它 - 如果允许多文件，确认文案得动态写清楚数量，比如
确认上传 ${files.length} 个文件？ - 别在
change回调里直接fetch，确认弹窗是异步的，要用Promise链或async/await控制时序
真正的难点不在怎么弹窗，而在于确认之后的流程衔接：模态框关闭时机、状态重置边界、禁用按钮的恢复逻辑、服务端是否做了幂等校验——这些地方漏一个，上传就可能重复或静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
