异步请求之跨域名异步文件上传iframe标签
2013-12-02 20:33
691 查看
好吧 这篇文章可能确实有点晚了。虽然真的没人关注我的博客 不过在最近开始进新公司用YII开发的时候想写点自己的心得的时候发现之前的文章还留了个尾巴。
没有太多的精力来完成这篇文章了 因为我已经迫不及待的想记录一些yii的用法了。
首先 需要两个域名 www.a.com和www.b.com本机具体配置方法可以看之前我的博客
异步请求之非同域名简单异步请求script标签
文件清单
www.a.com下面
index.php
js.php
www.b.com 下面
test.php
和一个upload目录
www.a.com 的index.php文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
var callbackfun = function(url){
var body = document.getElementsByTagName("body").item(0);
var img = document.createElement ("img");
img.src = url;
body.appendChild (img);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form action="http://www.b.com/test.php?callback=parent.callbackfun" method="post" enctype="multipart/form-data" target="upload">
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />
</form>
<iframe name="upload" style="display:none"></iframe>
</BODY>
</HTML>
这个文件是我们要给用户看到的页面 里面包含一个form表单 一个iframe 一段用来回调的js方法
其中form是用来提交文件用的 如果这个文件还不是很清楚可以看我上一篇博文
异步请求之同域名 异步请求 ajax
这里主要做的是将form表单数据（包括里面的一个file input标签）提交给iframe 然后等待iframe里面的页面来回调当前页面的callbackfun方法把url带回来
沿着代码逻辑我们看看www.b.com里面的test.php文件
<?php
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);
header('Location: http://www.a.com/js.php?callback='.$_GET['callback'].'&url='.urlencode("http://www.b.com/upload/" . $_FILES["file"]["name"]));
?>
这个文件里面主要做了两件事情 1、 把上传过来的文件保存到本地 2、把当前页面重定向到www.a.com/js.php 文件 并且 将get获得的callback参数和保存的文件路径传递过去
那么现在文件保存到的是www.b.com/upload文件夹下面 注意：当前的test.php是在www.a.com/index.php页面的iframe中呈现的。
下面我们看看通过www.b.com/test.php跳转到的www.a.com/js.php文件
<SCRIPT LANGUAGE="JavaScript">
<!--
<?php
echo $_GET['callback']."('".urldecode($_GET['url'])."')";
?>
//-->
</SCRIPT>
这个文件其实只干了一件事情。js调用传递过来的callback方法并且将url传递给该方法。
为什么要这样去做？有些小伙伴们估计被绕晕了 我们来画张图来说明所有的事情
这里为什么需要回到www.a.com/js.php跳转下再输出callback方法？因为iframe在非同域名的时候访问父窗口的时候是会被受限制的。不在特殊情况下是不允许非本域名下的iframe文件访问父窗口的任何资源，包括js文件。所以我们需要再重新跳转到www.a.com/js.php来实现调用iframe之外的方法。
这篇文章晚了快一年了。写的非常潦草。希望能对一些人有帮助。
没有太多的精力来完成这篇文章了 因为我已经迫不及待的想记录一些yii的用法了。
首先 需要两个域名 www.a.com和www.b.com本机具体配置方法可以看之前我的博客
异步请求之非同域名简单异步请求script标签
文件清单www.a.com下面
index.php
js.php
www.b.com 下面
test.php
和一个upload目录
www.a.com 的index.php文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
var callbackfun = function(url){
var body = document.getElementsByTagName("body").item(0);
var img = document.createElement ("img");
img.src = url;
body.appendChild (img);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form action="http://www.b.com/test.php?callback=parent.callbackfun" method="post" enctype="multipart/form-data" target="upload">
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />
</form>
<iframe name="upload" style="display:none"></iframe>
</BODY>
</HTML>
这个文件是我们要给用户看到的页面 里面包含一个form表单 一个iframe 一段用来回调的js方法
其中form是用来提交文件用的 如果这个文件还不是很清楚可以看我上一篇博文
异步请求之同域名 异步请求 ajax
这里主要做的是将form表单数据（包括里面的一个file input标签）提交给iframe 然后等待iframe里面的页面来回调当前页面的callbackfun方法把url带回来沿着代码逻辑我们看看www.b.com里面的test.php文件
<?php
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);
header('Location: http://www.a.com/js.php?callback='.$_GET['callback'].'&url='.urlencode("http://www.b.com/upload/" . $_FILES["file"]["name"]));
?>
这个文件里面主要做了两件事情 1、 把上传过来的文件保存到本地 2、把当前页面重定向到www.a.com/js.php 文件 并且 将get获得的callback参数和保存的文件路径传递过去
那么现在文件保存到的是www.b.com/upload文件夹下面 注意：当前的test.php是在www.a.com/index.php页面的iframe中呈现的。
下面我们看看通过www.b.com/test.php跳转到的www.a.com/js.php文件
<SCRIPT LANGUAGE="JavaScript">
<!--
<?php
echo $_GET['callback']."('".urldecode($_GET['url'])."')";
?>
//-->
</SCRIPT>
这个文件其实只干了一件事情。js调用传递过来的callback方法并且将url传递给该方法。
为什么要这样去做？有些小伙伴们估计被绕晕了 我们来画张图来说明所有的事情
这里为什么需要回到www.a.com/js.php跳转下再输出callback方法？因为iframe在非同域名的时候访问父窗口的时候是会被受限制的。不在特殊情况下是不允许非本域名下的iframe文件访问父窗口的任何资源，包括js文件。所以我们需要再重新跳转到www.a.com/js.php来实现调用iframe之外的方法。
这篇文章晚了快一年了。写的非常潦草。希望能对一些人有帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 异步请求之同域名异步文件上传iframe标签
- iframe无刷新跨域上传文件并获取返回值
- easy ui 异步上传文件，跨域
- 使用webuploader做文件上传，跨域请求session不一致
- 异步上传文件并获得返回值（完全跨域）
- ajax异步文件上传，iframe方式
- js无刷新无插件异步上传文件,使用dojo.io.iframe发送form数据包
- 文件上传,iframe跨域数据提交的实现
- ajax异步跨域上传文件，并显示上传进度
- html使用iframe实现伪异步表单，实现无刷新上传文件时遇到的问题
- 关于PHP+iFrame实现页面无需刷新的异步文件上传
- iframe模拟ajax异步请求，上传文件
- iframe无刷新跨域上传文件并获取返回值
- form配合iframe实现文件异步上传
- php之表单文件iframe异步上传
- 异步上传文件并获得返回值（完全跨域）
- iframe 实现的文件异步上传解析
- Django+Jquery+Bootstrap Modal+Iframe使用异步机制上传文件实现方法
- form上传文件以及跨域异步上传