IE浏览器html5文件上传失败_解决IE上传html5法【解难】

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

IE 浏览器(尤其是 IE9 及更早版本)根本不支持 HTML5 的 File APIFormData,所谓“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 参数或 Authorization header(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 的底层断层。