[置顶] kindeditor4跨域上传图片解决

项目中正在使用kindeditor, 版本4.1.10
很多公司的图片会走CDN，需要单独的一台图片上传服务如：（upload.268xue.com）
kindeditor上传图片的简单内部流程：
上传按钮是提交到iframe，生成1个form和1个iframe,form提交到(arget)iframe
iframe的onload方法获取返回的值，然后调用配置回调方法afterUpload/afterError。
具体实现:（在a.com选中图片，上传用upload.268xue.com，返回上传的结果给a.com，我的项目springmvc）：
跨域中使用需要修改2个地方：1.上传后的返回方式，2回调的页面处理。
1.upload.268xue.com的上传方法：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String upload(HttpServletRequest request, HttpServletResponse response) {
        try {
            String referer = request.getHeader("referer");
            Pattern p = Pattern.compile("([a-z]*:(//[^/?#]+)?)?", Pattern.CASE_INSENSITIVE);
            Matcher mathcer = p.matcher(referer);
            if (mathcer.find()) {
                String callBackPath = mathcer.group();// 请求来源a.com
                MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
                MultipartFile imgFile = multipartRequest.getFile("fileupload");//k4中fileupload
                //JsonObject json =自己的处理imgFile
                // 同域时直接返回json.toString()即可无需redirect
 String url = "redirect:" + callBackPath + "/kindeditor/plugins/image/redirect.html?s=" + json.toString() + "#" + json.toString();
                logger.info(String.format("upload success url:%s", url));
                return url;
            } else {
                logger.info("upload referer not find");
            }
        } catch (Exception e) {
            logger.error("upload error", e);
        }
        return null;
    }

上传自己实现，重点是返回，我的打印结果：

upload success url:http://a.com/kindeditor/plugins/image/redirect.html?s={"error":0,"url":"http://upload.268xue.com/upload/sns/temp/20140510/1399706737140139370.jpg"}#{"error":0,"url":"http://upload.268xue.com/upload/sns/temp/20140510/1399706737140139370.jpg"}

redirect有参数s和#号是重复的，很low,在a.com中用到。期望修改掉。
2.a.com中编辑器的初始化：

var uploadbutton = KindEditor.uploadbutton({
button : KindEditor("fileupload")[0],
fieldName : "fileupload",
url : "http://upload.268xue.com/upload",
afterUpload : function(data) {
if (data.error == 0) {
            //data.url 处理
} else {
alert("error");
}
},
afterError : function(str) {
//alert('error: ' + str);
}
});
uploadbutton.fileBox.change(function(e) {
uploadbutton.submit();
});

按钮：fileupload，没有特殊的地方。 3.a.com中kindeditor\plugins\image\redirect.html内容：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ie shit shit</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;
        //ie6取不到hash???用那个方式取？暂使用url传参数s
        if(location_hash!=null && location_hash!="" && location_hash){
         var data = location.hash ? location.hash.substring(1) : '';
                 document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data  + '</pre>';
        }else{
         var data=getParameter("s");
         document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data  + '</pre>';
        }
        };
    </script>
</head>
<body onload="upload_callback();">
</body>
</html>

其中参数s和#号自己处理下可以只用1个。
以上IE6、7、8、9、10、火狐、chrome测试通过。苹果浏览器safari测试未通过。
=========================================================== safari下原因：请求redirect.html后iframe的onload调用处理时转为json时出错：

如：http://a.com/kindeditor/plugins/image/redirect.html?s=%7B%22error%22:0,%22url%22:%22/upload/demo_web/temp/20140510/1399698690364609649.jpg%22%7D#%7B%22error%22:0,%22url%22:%22/upload/demo_web/temp/20140510/1399698690364609649.jpg%22%7D

处理后结果：%7B%22error%22:0,%22url%22:%22/upload/demo_web/temp/20140510/1399698690364609649.jpg%22%7D 转为json时出错。应该格式为:{"error":0,"url":"/upload/demo_web/temp/20140510/1399698690364609649.jpg"} 如下图的str转json：K.json(str).（kindeditor-all.js 4196-4206行） [置顶] kindeditor4跨域上传图片解决

应该是请求有问题，临时解决，修改kindeditor-all.js（错误时再尝试下转码） [置顶] kindeditor4跨域上传图片解决

自己的处理，低级的地方多指正学习。

秒客网

[置顶] kindeditor4跨域上传图片解决

相关文章