跨域上传并返回结果

yonglan

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

1. <form method="post" target="if" enctype="multipart/form-data" action="http://www.ceshi.com/upapi.php?cb=http://shiyan.yonglan.net/shangchuan/tmp.html">
   
2.         <input type="file" name="file" />
   
3.         <input type="SUBMIT" value="upload" />
   
4. </form>
   
5. <IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>
   
6.       <script>
   
7.         // 这个函数将来会被iframe用到
   
8.         function getIframeVal(val)
   
9.         {
   
10.                         if(val){
    
11.                             alert(val);
    
12.                         }
    
13.                
    
14.         }
    
15. </script>

复制代码

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

1. <?php  
   
2.        move_uploaded_file($_FILES['file']['tmp_name'],'upload/' . $_FILES['file']['name']); //存储上传的文件  
   
3.      //    print_r($_FILES);
   
4.        $data = $_FILES['file']['name'];
   
5.        header('location:'.$_GET['cb'].'?file_id='.$data);
   
6. ?>

复制代码

这里可以处理文件，然后入库。操作完成后，把文件的id及其他信息都放在url里，最后跳转到这个url。（示例并未做任何数据验证）
最后来看看tmp.html，也就是刚刚deal.php跳转到的url，这个文件的内容会填充到页面的iframe里。

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>

复制代码