yonglan 发表于 2014-9-25 17:13:27

跨域上传并返回结果

首先是一个正常的上传页面 upload.html
<form method="post" target="if" enctype="multipart/form-data" action="http://www.ceshi.com/upapi.php?cb=http://shiyan.yonglan.net/shangchuan/tmp.html">
        <input type="file" name="file" />
        <input type="SUBMIT" value="upload" />
</form>
<IFRAME id="if" name="if" src="about:blank" frameborder='0'></IFRAME>
      <script>
        // 这个函数将来会被iframe用到
        function getIframeVal(val)
        {
                        if(val){
                            alert(val);
                        }
               
        }
</script>
这里有一个关键点是form的target要指向iframe,同时把iframe隐藏起来,这样上传的处理结果就会显示在该iframe里。action里的cb(callback)参数表示处理完成后要跳转的url,因为我们的目标是iframe,所以只会把跳转的页面输出到iframe,而不会让当前页面跳转。
还有一点,callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。
再来看看form的action   php内容
<?php
       move_uploaded_file($_FILES['file']['tmp_name'],'upload/' . $_FILES['file']['name']); //存储上传的文件
   //    print_r($_FILES);
       $data = $_FILES['file']['name'];
       header('location:'.$_GET['cb'].'?file_id='.$data);
?>

这里可以处理文件,然后入库。操作完成后,把文件的id及其他信息都放在url里,最后跳转到这个url。(示例并未做任何数据验证)
最后来看看tmp.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>

页: [1]
查看完整版本: 跨域上传并返回结果