HTML5上传在IE6–IE9中需用隐藏iframe降级实现,因不支持FormData和XMLHttpRequest2;IE10+才可安全使用XHR2+FormData;应通过API检测而非UA判断分支,iframe方案需注意同域、响应格式及XSS防护。

HTML5 的 本身在 IE6–IE9 中就支持基础上传,所谓“HTML5 上传兼容旧浏览器”,真正要解决的不是「能不能点开选择文件」,而是「能不能用 FileReader、FormData、XMLHttpRequest 2 这套现代 API 做无刷新上传」——而这些在 IE9 及以下根本不存在。
IE9 及以下不支持 FormData 和 XMLHttpRequest 2
旧浏览器(尤其是 IE6–IE8)无法构造 FormData,也无法用 XMLHttpRequest 发送二进制或带文件的表单。常见报错包括:Object doesn't support this property or method 'FormData' 或 Access is denied(跨域 iframe 场景下)。
- IE6–IE9:只能靠
提交 + 隐藏模拟异步(俗称“iframe hack”) - IE10+:可安全使用
FormData+XMLHttpRequest.upload - 注意:IE9 支持
XMLHttpRequest,但不支持upload属性和FormData.append(file)的 Blob/File 参数
用隐藏 iframe 实现 IE6–IE9 兼容上传
核心思路是把表单提交目标设为一个同域的隐藏 ,后端返回一段可执行的 JS(如 parent.handleUploadResponse(...)),由父页捕获结果。这是最稳定、无需插件的降级方案。
- 表单必须设置
target指向 iframe 的name,且enctype="multipart/form-data" - iframe 必须与页面同域,否则父页无法读取其内容(跨域限制)
- 后端响应不能是纯 JSON,需包裹在
标签中,或返回 HTML 页面调用父窗口函数 - 避免直接写
document.write,推荐用document.domain配合回调函数名白名单校验
如何优雅判断并分流上传逻辑
不要依赖用户代理字符串(navigator.userAgent),应检测关键 API 是否存在。IE10+ 才有 FormData 和 XMLHttpRequest.prototype.upload,这是最可靠的判断依据。
电子手机配件网站源码是一个响应式的织梦网站模板,软件兼容主流浏览器,且可以在PC端和手机端中进行浏览。模板包含安装说明,并包含测试数据。本模板基于DEDECms 5.7 UTF-8设计,需要GBK版本的请自己转换。模板安装方法:1、下载最新的织梦dedecms5.7 UTF-8版本。2、解压下载的织梦安装包,得到docs和uploads两个文件夹,请将uploads里面的所有文件和文件夹上传到你的
立即学习“前端免费学习笔记(深入)”;
- 检测
typeof FormData !== 'undefined'且!!window.XMLHttpRequest && 'upload' in new XMLHttpRequest() - 若任一条件不满足,走 iframe 方案;否则走 XHR2 + FormData
- 避免在 IE9 中尝试创建
new FormData(form)—— 它会静默失败或抛异常 - 可封装统一上传函数,内部自动路由,对外保持
upload(file, options)接口一致
function uploadFile(file, options) {
if (typeof FormData !== 'undefined' && 'upload' in new XMLHttpRequest()) {
// 现代浏览器:XHR2 + FormData
} else {
// 旧浏览器:iframe 表单提交
}
}
真正难的不是写两套逻辑,而是确保 iframe 方案里服务端返回格式可控、错误能透出、进度无法反馈(这是旧浏览器的硬伤),以及所有回调函数名都经过校验——稍不注意就会被 XSS 利用。










