zoukankan      html  css  js  c++  java
  • kindeditor4跨域上传图片解决

    项目中正在使用kindeditor, 版本号4.1.10
    非常多公司的图片会走CDN,须要单独的一台图片上传服务如:(upload.268xue.com)

    kindeditor上传图片的简单内部流程:

    上传button是提交到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();
    	});

    button:fileupload。没有特殊的地方。

    3.a.com中kindeditorpluginsimage edirect.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个。


    以上IE678910火狐、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行)


    应该是请求有问题,暂时解决,改动kindeditor-all.js(错误时再尝试下转码)




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





  • 相关阅读:
    经典矩阵dp寻找递增最大长度
    有符号char转无符号short
    正则表达式学习之grep,sed和awk
    Git学习总结
    Linux下的压缩及归档
    bash脚本编程学习笔记(二)
    bash脚本编程学习笔记(一)
    Linux磁盘及文件系统(三)Linux文件系统
    Linux磁盘及文件系统(二)Linux下磁盘命名和分区
    Linux磁盘及文件系统(一)
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5071156.html
Copyright © 2011-2022 走看看