IE9及以下不支持File API和FormData,需用onchange属性和表单提交;IE10–11支持FormData但拒绝Blob对象,且禁用手动设置Content-Type,须维护两套上传逻辑。

IE 浏览器(尤其是 IE9 及更早版本)根本不支持 HTML5 的 File API 和 FormData,所谓“HTML5 文件上传”在这些版本里压根无法运行——不是配置问题,是能力缺失。
IE9 及以下版本连 input[type="file"] 都不触发 change 事件?
这是典型的表现:点击选择文件后,document.getElementById('file').files 始终为空,addEventListener('change', ...) 完全不执行。因为 IE9- 没有 files 属性,也不支持现代事件绑定方式。
- 必须改用
onchange属性写法(而非addEventListener),且仅对表单提交有效 -
是唯一可靠入口 - 不要试图读取
this.files[0]——IE9 返回undefined,只能走表单提交或 ActiveX
IE10–IE11 能用 FormData,但不支持 append('file', file) 传入 Blob?
IE10/11 实现了部分 FormData,但存在严重兼容缺陷:它只接受原生 的 files[0],拒绝接受通过 new Blob([...]) 或 canvas.toBlob() 生成的 Blob 对象。
- 上传前务必检查
file instanceof Blob,IE 下若为false(比如是File子类但被 polyfill 扰乱),需绕过处理 - 避免在 IE 中调用
formData.append('file', new Blob([...])),会静默失败或报错InvalidStateError - 如需预览或裁剪,上传时仍要回退到原始
input.files[0],而不是加工后的 Blob
用 XMLHttpRequest 上传时,IE10+ 报错 Access is denied?
这通常发生在尝试手动设置 xhr.setRequestHeader('Content-Type', ...) 上传文件时。IE 对 multipart/form-data 请求头有硬性限制:一旦使用 FormData,就不能手动设置 Content-Type,否则触发安全拦截。
立即学习“前端免费学习笔记(深入)”;
- 删除所有类似
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=...')的代码 - 让浏览器自动设置请求头——
send(formData)时 IE 会自动生成正确的Content-Type和 boundary - 若需带 token,改用 URL 参数或
Authorizationheader(IE10+ 支持)
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
// ✅ 正确:不设 Content-Type,由浏览器自动生成
xhr.send(formData);
// ❌ 错误:IE 会立即报 Access is denied
// xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=...');
真正麻烦的不是“怎么写”,而是得同时维护两套逻辑:一套走 FormData + fetch/XHR,另一套 fallback 到隐藏 表单提交或 ActiveX(仅限企业内网可信环境)。别指望一个 polyfill 能填平 IE 的底层断层。









