现在的位置: 首页fault, js>正文
jQuery跨域上传文件的解决办法?
2012年10月25日 fault, js 暂无评论 ⁄ 被围观 6,256 view+

1. 首先是上传页面 upload.html

<script type="text/javascript">// <![CDATA[
    // 这个函数将来会被iframe用到
    function callUpData(result,imgurl)
    {
        alert(result);
    }
// ]]></script></pre>
<form action="http://image.jiunile.com/deal.php?cb=deal_cd.html" method="post" enctype="multipart/form-data" target="bridgeframe"><input type="file" name="file" />
 <input type="SUBMIT" value="upload" /></form>
<pre></pre>
<iframe id="bridgeframe" style="display: none;" name="bridgeframe" src="about:blank" frameborder="0" width="320" height="240"></iframe>
<pre>

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

还有一点,callback url要和当前页面同域。跨域的iframe无法调用父页面的内容。

2. 再来是deal.php(图片服务器上),就是form的action

<!--?php <br ?-->// deal upload file
// and get file id, you can pass other params either
header('location:'.$_GET['cb'].'?result=1&imgurl='.$_GET['url']);

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

3. 最后是deal_cd.html(图片服务器上),也就是刚刚deal.php跳转到的url

这个文件的内容会填充到页面的iframe里:即前面隐藏的IFRAME id="bridgeframe"

<script type="text/javascript">// <![CDATA[
        document.domain = xxx.com
        function request(paras){
            var url = location.href;
            var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");
            var paraObj = {}
            for (i=0; j=paraString[i]; i++){
                paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);
            }
            var returnValue = paraObj[paras.toLowerCase()];
            if(typeof(returnValue)=="undefined"){
                return "";
            }else{
                return returnValue;
            }
        }
        window.parent.callUpData(request('result'),request('imgurl'));
// ]]></script>

这里调用了父窗口的callUpData方法,这样父页面就获得了需要返回给它的的数据。

来源:http://www.haowen.it/question/279

给我留言

留言无头像?


×
腾讯微博