文件异步上传实际是用form提交和iframe接收制造假异步效果
步骤:
触发提交按钮时,
1.
创建隐藏表单
表单中植入上传的文件域
为表单设置绝对定位到页面看不到的地方
在文档中插入表单
2.
创建隐藏iframe
为iframe设置绝对定位到页面看不到的地方
在文档中插入iframe
为表单设置action,method,target,enctype等属性
3.
表单提交
再iframe加载完成后,回调操作函数,并延迟一会在DOM树种移除创建的表单和iframe。
注意事项:
1.创建表单后插入文件域的时候,如果讲选择文件后的input[type=file]克隆,把克隆体插入到表单,这个克隆的input[type=file]value会为空(在一些版本不一样的浏览器里),导致上传时不能获取到文件,所以要把也面上的input[type=file]直接插入到创建的表单中,再把克隆的文件域放到页面原先的位置,这样就不会出现兼容问题。
2.创建的表单的enctype属性,IE678存在兼容问题,需要由encoding属性来代替
3.调用iframe的内容
IE: document.getElementById(iframeId).contentDocument.document.body.innerHTML
other: document.getElementById(iframeId).contentWindow.document.body.innerHTML