HTML5禁止脚本自动触发file input，必须由用户手势触发；选完即传需监听change事件并立即上传，避免隐藏input或JS赋值，清空value可解决重复选同文件不触发问题。
HTML5 本身不提供“自动上传”功能，input[type="file"] 必须由用户主动触发（点击、空格、回车等），这是浏览器安全策略强制要求的。所谓“自动上传”，实际是用户选择文件后，用 JavaScript 立即调用 XMLHttpRequest 或 fetch 发送，跳过手动点击“上传”按钮这一步。
为什么不能真正自动触发 file input？
浏览器禁止脚本调用 input[type="file"].click() 除非该调用发生在用户手势（如 click、keydown）的同步执行栈中。这是为了防止恶意网站静默收集用户文件。
常见错误现象：
- 直接在 DOMContentLoaded 或 setTimeout 中调用 fileInput.click() → 报错或静默失败
- 绑定 change 后立刻 submit() 表单但未设 enctype="multipart/form-data" → 后端收不到文件
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）均遵守此限制
- 绕过方案（如 iframe + form.submit）在新版 Chrome 中已失效
- 移动端 Safari 对非 visible input 的 click 支持更严格，常完全无响应
如何实现“选完即传”的合理流程？
核心是监听 input[type="file"] 的 change 事件，在回调中立即构造 FormData 并上传。关键不是“绕过触发”，而是“缩短操作链”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 保持
input元素可见且可聚焦（避免display: none或opacity: 0配合position: absolute的老式隐藏法，部分浏览器会拒绝触发） - 若需自定义按钮样式，用
label[for]关联真实input，而非覆盖遮挡 - 上传前检查
event.target.files.length > 0，避免空文件提交 - 上传失败时必须显式提示用户，不能静默重试（用户无法感知是否真的上传了）
哪些场景下 change 事件不会触发？
change 事件只在用户**真正选择新文件**时触发，以下情况不会触发：
- 用户再次选择同一个文件（文件路径和内容完全一致）→ 浏览器认为无变更，不发事件
- 通过 JS 赋值
input.value = 'xxx'→ 无效，且违反安全策略 - 拖拽文件到页面但未落在
input上（需额外监听drop和dragover）
解决重复选择同一文件的问题：可在 change 回调末尾加 e.target.value = '' 清空输入值，确保下次选同名文件也能触发事件。
移动端兼容性与 UX 注意事项
iOS Safari 对 input[type="file"] 的支持有明显差异：
- 不支持
capture="camera"以外的 capture 值（如microphone需用） - 选择照片后可能弹出“编辑”界面，此时
change事件延迟触发（直到用户确认裁剪） - 部分安卓 WebView（尤其旧版）对
FormData.append(file)中的file.lastModified时间戳处理异常，建议上传前移除或标准化
不要依赖 input.files[0].size 判断是否为空 —— iOS Safari 在用户取消选择时可能仍保留上一次的 FileList，应始终以 event.target.files.length 为准。
