能用iframe实现无刷新上传，但前提是同源、服务端返回完整HTML、且接受无进度条、不可取消、无法读取HTTP状态码等限制；target必须与iframe的name属性严格一致（大小写、空格、连字符均敏感），否则退化为全页跳转；服务端须返回含parent.handleUpload()的合法HTML文档，而非纯JSON。
能用 iframe 实现无刷新上传，但前提是同源、服务端返回完整 HTML、且你接受它不支持进度条、无法取消、不能读取 HTTP 状态码这些硬限制。
为什么 target 和 name 必须严格一致
表单提交后不跳转，靠的是浏览器把响应“塞进”指定 iframe。这个匹配只认 name 属性，和 id 无关。写成 target="upload-frame" 但 iframe 只有 id="upload-frame"，浏览器就直接新开标签页。
-
target和name大小写、空格、连字符全敏感：一个写uploadFrame，一个写uploadframe，就失败 - 别用动态生成的
id冒充name，尤其在 Vue/React 中容易混淆 - 多个表单共用同一个
iframe会互相覆盖响应，建议每个上传实例配独立name
服务端返回内容必须是 HTML，不是 JSON
浏览器加载 iframe 时，只认 HTML 文档结构。如果后端只返回 {"status":200,"url":"/uploads/a.jpg"}，iframe 会当成纯文本加载，onload 虽触发，但 contentDocument.body.innerHTML 拿不到可解析的 DOM，脚本也不会执行。
- 正确做法是返回完整 HTML，例如：
<script>parent.handleUpload({url: "/uploads/a.jpg"})</script> -
handleUpload必须提前在父页面声明，不能定义在 iframe 里 - HTTP 状态码不可靠：500 错误响应照样触发
onload，错误判断得靠响应体里的字段，比如if (data.error)
清空 input 和重置状态必须在 onload 里做
表单 submit() 是同步调用，但提交动作本身是异步完成的。在 form.onsubmit 或按钮点击里立刻调 this.reset()，会导致表单还没发出去就被清空。
- 监听
iframe.onload，而不是form.submit后立即操作 - IE 需用
attachEvent("onload", ...)，现代浏览器用iframe.onload = ... - 清空文件
input不能靠reset()—— 它在部分浏览器中不重置已选文件，得手动赋值：fileInput.value = "" - 若需显示 loading，应在
form.submit()前设disabled，并在onload里恢复
高度自适应和跨域是两个典型断点
同源时想让 iframe 高度随内容撑开，contentDocument.body.scrollHeight 在 Safari 和某些 Android WebView 中会读到 0 —— 因为 DOM 尚未就绪，哪怕 onload 已触发。
- 解决办法是加一层延迟或轮询：
setTimeout(() => iframe.height = iframe.contentDocument.body.scrollHeight, 100) - 跨域时
iframe.contentDocument直接抛SecurityError，连onload里读文本都不行，只能靠服务端注入parent.xxx()回调 - 本地开发用
file://协议时，缓存极顽固，务必加时间戳参数：iframe.src = "upload.php?t=" + Date.now()
真正难的不是写几行 JS，而是处理那些“看起来成功了，但回调没执行”“明明写了 script 却没调用 parent 函数”“Safari 高度算出来是 0”的时刻——它们都藏在 DOM 就绪时机、同源策略、浏览器兼容性这些边界里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
