向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

通常我们会有一个统一的上传接口，这个接口会被其他的服务调用。如果出现不同域，还需要无刷新上传文件，并且获取返回值，这就有点麻烦了。比如，新浪微博启用了新域名www.weibo.com，但接口还是使用原来的域：picupload.t.sina.com.cn。

研究了一下新浪微博的处理方法，这里大概演示一下。

首先是一个正常的上传页面 upload.html
<script>   // 这个函数将来会被iframe用到   function getIframeVal(val)   {     alert(val);   } </script> <!-- 我把upload.com指向了127.0.0.1 --> <form method="post" target="if" enctype="multipart/form-data" action="http://upload.com/playground/js/deal.php?cb=http://localhost/playground/js/deal_cd.html">   <input type="file" name="file" />   <input type="SUBMIT" value="upload" /> </form> <IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>

这里有一个关键点是form的target要指向iframe，同时把iframe隐藏起来，这样上传的处理结果就会显示在该iframe里。action里的cb(callback)参数表示处理完成后要跳转的url，因为我们的目标是iframe，所以只会把跳转的页面输出到iframe，而不会让当前页面跳转。

还有一点，callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。【这儿如跨域了怎么办呢？】

再来看看deal.php，也就是form的action
<?php // deal upload file // and get file id, you can pass other params either header('location:'.$_GET['cb'].'?file_id=123');

这里可以处理文件，然后入库。操作完成后，把文件的id及其他信息都放在url里，最后跳转到这个url。

最后来看看deal_cd.html，也就是刚刚deal.php跳转到的url，这个文件的内容会填充到页面的iframe里。
<script type="text/javascript">   var rs = window.location.search.split('?').slice(1);   window.parent.getIframeVal(rs.toString().split('=').slice(1)); </script> [/html] 这里调用了父窗口的getIframeVal方法，这样父页面就获得了文件的id。 ------------------------------------------------------------------------------------------------------------------------------------------------------ 还有一点，callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。【这儿如跨域了怎么办呢？】??? <a href="attachment.php?fid=256" target="_blank"><img src="attachment.php?fid=256" class="insertimage" alt="点击在新窗口中浏览此图片" title="点击在新窗口中浏览此图片" border="0"/></a> 1、document.domain+iframe的设置 对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地![所以尽量是主域相同] www.a.com上的a.html [codes=html] <script>   document.domain = 'a.com';     // 这个函数将来会被iframe用到   function getIframeVal(val)   {     alert(val);   } </script> <!-- 我把upload.com指向了127.0.0.1 --> <form method="post" target="if" enctype="multipart/form-data" action="http://b.a.com/deal.php?cb=http://localhost/playground/js/deal_cd.html">   <input type="file" name="file" />   <input type="SUBMIT" value="upload" /> </form> <IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>
b.a.com上的deal.php (这个是请求API的页面，如上传文件的页)
<?php // deal upload file // and get file id, you can pass other params either header('location:'.$_GET['cb'].'?file_id=123'); echo "<script document.domain = 'a.com';getIframeVal();?> ";//这儿的PHP需要把这个头极其函数调用拼接起来，调用a.com的父亲页面。
这种方式适用于{www.a.com, a.com, script.a.com, css.a.com}中的任何页面相互通信。这儿的关键在于两个页面都要有设定document.domain =XXX，如果有一个不设定的话，都会报错！！！

备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。
常规用document.domain+iframe的设置，也就是上面这种方法。
当然还有其他的上传跨域方法：利用iframe和location.hash window.name实现的跨域数据传输 Html5等。
如跨域文件上传解决方案：上传文件到A网站，然后通过PHP的ftp函数、或HTTP模拟上传到B，这样的话返回的json一直是在A网站上的；另外也可以参考一下腾讯的，如果两个网站都是你的，比如你a网站的域名为www.a.com，在B网站同时绑定一个域名upload.www.a.com，就可以直接上传到B网站并返回json数据了，来自：http://www.gosenz.com/blog/Default.aspx?__tencentip=10.16.64.112&__tencentid=1&__tencentrawurl=http://www.gosenz.com/blog/?p=89
以上稍微整理自网上By:jack。
参考：http://blog.leezhong.com/tech/2011/05/06/crossdomain-upload.html
        http://developer.51cto.com/art/201102/245701.htm

作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：http://jackxiang.com/post/4871/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！