iFrame 无刷新文件上传

概述

要实现无刷新的二进制文件上传，可以使用FormData对象结合AJAX实现，但在低版本的IE是不支持的。为了要支持IE8，一种被广泛应用的技术就是 -- iFrame文件上传。

iFrame文件上传要点如下

1. 在HTML文档有一个form表单
   form元素添加target属性，并等于iFrame元素的name值，同时form元素的action值为正确的URL，代码如下:

<form action=“handle.php” target=“#iframe-uploadFile” enctype="multipart/form-data">
</form>

2. 在HTML文档中需要一个空的iFrame，代码如下:

<iframe name=“iframe-uploadFile” id=“iframe-uploadFile” style=“display:none”></iframe>

3. 文件上传成功的返回
   因为文件是通过iframe上传的，返回结果也会在iframe中。返回一段JS，这段JS去回调一个文件上传成功的处理函数，返回结果如下:

<script type=text/javascript>
document.domain=“zhihu.com”;parent.ZH.i({“url”:1234: “http://pic3.zhimg.com/343905146f1b83c6fc74e5055be0e686.jpg”, “r”: 0, “id”: “343905146f1b83c6fc74e5055be0e686”, “handle_mode”: “upload”}); 
</script>

完整的功能流程

利用iframe的特性，使用iframe去提交表单的HTTP请求，并接收响应。iframe接收到的响应应当为一段JS代码，这段JS代码会被立即执行，它所做的事情就是去回调主文档的一个JS函数，这个函数开始iframe文件上传之后的工作。