关闭

[置顶] 异步请求之跨域名异步文件上传iframe标签

625人阅读 评论(0) 收藏 举报
分类:

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


这篇文章晚了快一年了。写的非常潦草。希望能对一些人有帮助。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:27310次
    • 积分:480
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:0篇
    • 评论:41条
    文章分类
    最新评论