异步请求之跨域名异步文件上传iframe标签

来源：互联网发布：软件开发项目进度编辑：程序博客网时间：2024/05/29 18:22

好吧这篇文章可能确实有点晚了。虽然真的没人关注我的博客不过在最近开始进新公司用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文件

<?phpmove_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标签

异步请求之非同域名简单异步请求script标签

异步请求之同域名 异步请求 ajax

异步请求之同域名异步请求 ajax