form表单跨域上传

form表单跨域上传
一、背景
ajax与后台通信都是通过传递字符串,所以原生ajax不能直接上传文件.通过form表单提交会导致页面的刷新。
二、需求
本次业务是跨域上传文件,Ajax不能跨域上传文件,所以使用了html5的formdata来上传文件.

<form action="sever.php" name="uploadVideo" enctype="multipart/form-data" method="post">
<input type="file" name="newfile" accept="video/*"/>
<label style="opacity=0;width:100%;"
<input type="submit" />
</form>

此方法上传文件是可行的,但是如果是跨域上传的话就会遇到一些问题:取不到返回值。没有返回值就不能判断上传成功与否。为了解决跨域问题,有人给出了一个方案,页面中插入iframe的方式.上面代码改为如下形式:

<form action="sever.php" target="getInfoIframe" name="uploadVideo" enctype="multipart/form-data" method="post">
<input type="file" name="newfile" accept="video/*"/>
<label style="opacity=0;width:100%;"
<input type="submit" />
</form>
<iframe name="getInfoIframe" style="display:none" src="about:blank"></iframe>
<script>
var $iframe = $(iframe[name=getInfoIframe]);
$iframe.onload = function(){
    //post成功之后的处理操作
}
</script>

此代码做了哪些改动呢?
a)、首先,注意到加了一个iframe元素
b)、其次,form表单增加了target属性,值为iframe的name属性值
c)、最后,增加了一个脚本
为什么这样做呢?
1、target属性指定所链接的页面在浏览器窗口中的打开方式.
任何请求都有返回信息,target用于对返回信息的处理。
上传文件后会返回一些信息在iframe中.
target常用参数值有:
_top:在当前整个浏览器窗口打开所链接的文件,因此会删除所有框架
_self:在同一框架或窗口中打开所链接的文档,是默认取值
_blank:在新浏览器窗口打开链接文件
_parent:在父框架或父窗口中载入链接的文件
2、因为跨域,所以页面获取不到post请求的返回值,而使用iframe,则iframe和post请求的地址是同一域,则对于post请求的服务器来说不属于跨域,iframe能接收到post请求的返回值.
3、跨域post请求发送成功,能够在控制台查看返回值,但是页面中还是不能使用js操纵此返回值
因为iframe和post请求的地址是同一域,所以对于浏览器来说iframe还是属于跨域,不能操纵跨域的iframe
如下图:

如果返回值是callback的形式,在iframe页面中操作父页面也可以实现获取返回值。
4、iframe能接收到post请求的返回值,所以iframe的onload事件反映了post请求成功,且取到了返回值
监听iframe的onload事件可以断定数据传输成功,至于其是否在后端处理成功,我们还是不知
5、跨域上传文件现阶段最好使用Flash的方式,兼容性以及跨域都能解决

参考文章:
iframe与form的target简单应用

此条目发表在PHP, 数据库分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注