KindEditor 实现跨域上传最简单方法

场景

在 a.com 下上传文件到 b.com
上传地址为 http://b.com/upload.php

步骤

首先在 a.com 根目录下添加一个文件 redirect.html,添加内容

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>redirect</title>
    <script type="text/javascript">
        //获取url参数
        function getParameter(val) {
            var uri = window.location.search;
            var re = new RegExp("" + val + "=([^&?]*)", "ig");
            return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
        }
        var upload_callback = function(){
            var data=getParameter("s");
            var location_hash=location.hash;
            if(location_hash!=null && location_hash!="" && location_hash){
                var data = location.hash ? location.hash.substring(1) : '';
                data = decodeURIComponent(data);
                document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data  + '</pre>';
            }else{
                data = decodeURIComponent(data);
                document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data  + '</pre>';
            }
        };
    </script>
</head>
<body onload="upload_callback();">
</body>
</html>

修改 b.com 下的 upload.php 当文件上传处理完毕后跳转（302 Redirect）到 http://a.com/redirect.html,参考 php 代码：

$data = array('error'=>0,'url'=>'http://upload.b.com/xx.jpg');
$url = 'http://a.com/redirect.html?s='.json_encode($data);
header("Location: ".$url);

这样就完成了

原理

跨域上传都是通过创建 iframe 实现的，上传操作都是在 iframe 里完成的，这样当文件上传后，如果没有 redirect 跳转到 a.com 下，iframe 是无法访问到主窗口的，所以我们在 a.com 下创建了一个 redrect.html 并将上传结果作为参数返回到 http://a.com/redirect.html 上，在 redirect.html 下通过 url 上的参数获取到数据，放入到一个 pre 标签中，这样 kindeditor 就可以获取到返回的数据了

附件

后面再补吧

转载请注明：大后端 » KindEditor 实现跨域上传最简单方法

付费咨询