html文件上传兼容性本质是浏览器对formdata、xmlhttprequest.upload、filereader等api的支持断层；ie9及以下需降级到隐藏iframe方案，关键检测typeof formdata!=='undefined'且'upload' in new xmlhttprequest()，缺一不可。
HTML文件上传的兼容性问题，本质是「浏览器对现代 API 的支持断层」——不是所有环境都支持 FormData、XMLHttpRequest.upload 或 FileReader。IE9 及以下、部分国产浏览器、旧版 WebView 都会直接报 Object doesn't support this property or method 'FormData'。真正的兼容方案不是“加 polyfill”，而是按能力检测，分路径处理。
怎么判断该走 HTML5 还是 iframe 降级？
靠 navigator.userAgent 判断浏览器版本是陷阱，IE10 和 Edge 12+ 都可能被误判。唯一可靠的方式是检测关键 API 是否可用：
typeof FormData !== 'undefined'!!window.XMLHttpRequest && 'upload' in new XMLHttpRequest()
两个条件必须同时满足才走 XHR2 + FormData 路径；否则必须降级到隐藏 iframe 方案。注意：IE9 支持 XMLHttpRequest，但不支持 upload 属性，单独检测 XMLHttpRequest 不够。
iframe 降级方案的关键细节
用 iframe 模拟异步上传时，看似简单，实则几个点极易出错：
- 表单
target必须严格匹配iframe的name，大小写和空格都不能错 -
iframe必须与页面同域，否则父页读不到contentDocument，会触发跨域错误 - 后端返回内容必须是纯文本或可执行 JS（如
parent.handleUploadResponse({success:true})），且需白名单校验回调函数名，防 XSS - 不能用
display: none隐藏iframe，某些旧浏览器会停止加载其内容；改用width="0" height="0" style="position: absolute; left: -9999px"
移动端和 Electron 环境别踩坑
移动端（iOS Safari / Chrome for Android）根本不触发 dragover 和 drop，所谓“拖拽上传”在手机上纯属无效设计。Electron 则默认禁用拖放 —— 即使写了完整拖拽逻辑，若主进程没开 webPreferences.dragDrop: true，事件根本不会冒泡到渲染进程。
这两个场景下，<input type="file"> 是唯一可行入口。不要试图用 touchstart 模拟拖拽，它无法访问 event.dataTransfer.files，也违背原生交互习惯。
accept 和前端校验只是体验层，别当真
accept=".pdf,.jpg" 只影响文件选择对话框的默认过滤，用户点「全部文件」就能绕过；file.type 可被伪造，file.name 后缀也能手动改。这些检查只用于快速拦截明显异常（比如选了个 .exe 却声称是图片），绝不能替代后端的魔术字节检测和白名单 MIME 校验。尤其注意：Safari 对 accept="image/*" 的解析比 Chrome 更宽松，同一段代码在两台 Mac 上行为可能不一致。
最常被忽略的一点：所有兼容方案都依赖后端正确解析 multipart/form-data。如果后端用了老版本 multer 或没配 limits.fileSize，前端再稳妥也会卡在 400 错误里，而控制台往往不报错 —— 因为 fetch/XHR 默认不 reject 非 2xx 响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
