王亮的空间

我们一直在努力....

跨域文件上传

标签:
做文件上传遇到的问题,直接转,内容很详细。
转自http://blog.leezhong.com/tech/2011/05/06/crossdomain-upload.html
-------------------------以下是转帖-------------------------

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

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

首先是一个正常的上传页面 upload.html


js 代码
  1. <script>  
  2.     // 这个函数将来会被iframe用到  
  3.     function getIframeVal(val)  
  4.     {  
  5.         alert(val);  
  6.     }  
  7. </script>  
  8.   
  9. <!-- 我把upload.com指向了127.0.0.1 -->  
  10. <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">  
  11.     <input type="file" name="file" />  
  12.     <input type="SUBMIT" value="upload" />  
  13. </form>  
  14. <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 代码
  1. <?php  
  2. // deal upload file  
  3. // and get file id, you can pass other params either  
  4. header('location:'.$_GET['cb'].'?file_id=123');  

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

最后来看看deal_cd.html,也就是刚刚deal.php跳转到的url,这个文件的内容会填充到页面的iframe里。

js 代码
  1. <script type="text/javascript">  
  2.     var rs = window.location.search.split('?').slice(1);  
  3.     window.parent.getIframeVal(rs.toString().split('=').slice(1));  
  4. </script>  

这里调用了父窗口的getIframeVal方法,这样父页面就获得了文件的id。


--EOF--

若无特别说明,本站文章均为原创,转载请保留链接,谢谢

附件:


  • 浏览 (1078)
  • 评论 (0)
  • 发表于 2013-04-15 22:22
  • 程序开发
    评分: 请先登录再投票,同一篇博客一月只能投票一次!
    无人投票

相关博客:


评论


发表评论

验证码: