在非html5的情况下是无法用ajax把文件推送到后端的，只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为，返回text、html、json等类型的内容时浏览器会对当前页面进行渲染，相当于刷新。
所以基本思路很简单，提交上传文件表单时，让浏览器转移到iframe处理响应信息，响应信息嵌入一段js代码，这段js代码调用当前页面的一个方法就可以实现回调，类似于xss攻击。
这时就要用到form表单的target属性，我们这里只需要用到iframename的值，iframename指的是iframe的name属性，意思是转移到iframe
在JavaScript的世界里，异步文件上传是一个常见的需求，特别是在处理大文件或者为了提供更好的用户体验时。然而，在HTML5之前，由于浏览器的限制，Ajax无法直接处理文件上传，尤其是在老版本的Internet Explorer（如IE8）中。这时，利用`iframe`来实现异步文件上传的策略就显得尤为重要。
理解为什么不能直接使用Ajax上传文件。在非HTML5环境下，Ajax请求不支持`FormData`对象，这意味着无法将文件作为POST数据的一部分发送。当使用form表单提交文件时，浏览器会基于响应内容的类型和状态决定如何处理结果，这可能导致页面的刷新或者下载，显然这不是我们想要的结果。
为了解决这个问题，我们可以创建一个隐藏的`iframe`，并设置表单的`target`属性为这个`iframe`的`name`属性。这样，当表单提交时，浏览器会在`iframe`内部加载响应，而不是影响当前页面。这样，即使服务器返回的是HTML、JSON或者其他任何类型的数据，也不会影响到页面的状态。
以下是一个简单的实现步骤：
1. 创建一个`iframe`元素，设置其`name`属性，例如`iframeName`。
2. 创建一个`form`元素，设置`enctype`为`multipart/form-data`以支持文件上传，并将`target`属性设置为`iframeName`，确保提交时数据会发送到`iframe`。
3. 添加文件输入控件`<input type="file" />`到`form`中，让用户选择要上传的文件。
4. 设置`form`的`onsubmit`事件，可以用来做一些额外的处理，比如验证文件大小、类型等。
5. 提交`form`，浏览器会在`iframe`内处理服务器的响应。
6. 服务器端处理文件上传，然后在响应中返回一段JavaScript代码，这段代码可以是简单的`window.parent.functionName(data)`，其中`functionName`是你在父页面定义的回调函数，`data`是服务器返回的数据。
7. `iframe`加载完响应后，会执行返回的JavaScript代码，从而调用父页面的回调函数，这样你就可以在不刷新页面的情况下获取到上传的结果。
以下是一个简化的代码示例：
```html
<!-- JSP页面 -->
<form id="uploadForm" action="uploadAction" method="post" enctype="multipart/form-data" target="uploadFrame">
<input type="file" name="file" />
<input type="submit" value="上传" />
</form>
<iframe id="uploadFrame" name="uploadFrame" style="display:none;"></iframe>
<script>
window.onload = function() {
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
// 可在此添加额外的验证逻辑
});
// 响应处理
var iframe = document.getElementById('uploadFrame');
iframe.onload = function() {
var content = iframe.contentDocument || iframe.contentWindow.document;
var response = content.body.innerHTML; // 获取服务器返回的HTML内容
// 解析并执行返回的JavaScript
eval(response);
};
};
</script>
```
服务器端（例如Spring MVC）：
```java
@RequestMapping(value = "uploadAction", method = RequestMethod.POST)
public @ResponseBody String handleFileUpload(@RequestParam("file") MultipartFile file) {
// 处理文件上传逻辑...
// 返回一个JavaScript片段，例如：
return "window.parent.fileUploaded('" + result + "');";
}
```
需要注意的是，这种方法虽然可以实现异步文件上传，但它存在一些潜在的安全问题，比如XSS攻击。因此，服务器返回的JavaScript代码必须谨慎编写，避免注入恶意脚本。同时，由于`iframe`的存在，可能会影响页面性能，因为`iframe`会加载整个响应，包括不必要的CSS和JavaScript资源。
总结来说，通过`iframe`实现的异步文件上传是一种兼容旧版浏览器（如IE8）的方法。虽然相比现代的HTML5 File API有一些复杂和局限，但在不支持新特性的浏览器中，它仍然是一个实用的解决方案。
