项目中正在使用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中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行）


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




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




kindeditor4跨域上传图片解决的更多相关文章

  1. ueditor富文本编辑器跨域上传图片解决办法

    在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...

  2. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  4. Ajax跨域访问解决办法

    方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...

  5. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  6. 项目二(业务GO)——跨域上传图片(请求接口)

    之前,就听过“跨域上传”图片的问题,只是疏于研究,也就一再搁置,直至今天再次遇见这个不能避免的“坑”,才不得不思考一下,怎么“跨域上传”图片或者文件? 问题来源: 何为“跨域”? ——就是给你一个接口 ...

  7. 跨域请求解决方法(JSONP, CORS)

    1.跨域 假设我们页面或者应用部署在 http://www.aaa.com 上了,而我们打算从 http://www.bbb.com 请求提取数据.一般情况下,如果我们直接使用 AJAX 来请求将会失 ...

  8. 基于.Net Framework 4.0 Web API开发（5）：ASP.NET Web APIs AJAX 跨域请求解决办法（CORS实现）

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  9. 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

随机推荐

  1. 【Codeforces Round #452 (Div. 2) C】 Dividing the numbers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] n为偶数. l = 1, r = n (l,r)放在一组 l++,r-- 新的l,r放在另外一组 直到l+1==r 这个时候,判断两 ...

  2. Shiro学习总结（2）——Apache Shiro快速入门教程

    第一部分 什么是Apache Shiro 1.什么是 apache shiro : Apache Shiro是一个功能强大且易于使用的Java安全框架,提供了认证,授权,加密,和会话管理 如同 spr ...

  3. hiho 1182 : 欧拉路&#183;三

    1182 : 欧拉路·三 这时题目中给的提示: 小Ho:是这种.每次转动一个区域不是相当于原来数字去掉最左边一位,并在最后加上1或者0么. 于是我考虑对于"XYYY",它转动之后能 ...

  4. HSV颜色模型

    HSV(Hue, Saturation, Value)是根据颜色的直观特性由A. R. Smith在1978年创建的一种颜色空间, 也称六角锥体模型(Hexcone Model). 注意的是OpenC ...

  5. （三）unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout

     大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  6. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  7. 位数（digits）的处理

    主要针对:二进制表示法,以及十进制表示法: 1. 获取位数 已知该数 n 采用十进制进行表示 二进制形式的位数:⌊log2n⌋+1 十进制形式的位数:⌊log10n⌋+1 2. 截断(保留前/后 m ...

  8. Android 获取联系人手机号码、姓名、地址、公司、邮箱、生日

    public void testGetAllContact() throws Throwable { //获取联系人信息的Uri Uri uri = ContactsContract.Contacts ...

  9. Javascript和jquery事件--事件监听器

    之前看完了js和jq的冒泡捕获和事件对象event,这里看看同时使用js和jq后我最容易混淆的监听器的绑定. (1) js的监听器绑定解绑 绑定监听器有两种方式: a.on-事件type,比如oncl ...

  10. GO语言学习（八）Go 语言常量

    Go 语言常量 常量是一个简单值的标识符,在程序运行时,不会被修改的量. 常量中的数据类型只可以是布尔型.数字型(整数型.浮点型和复数)和字符串型. 常量的定义格式: const identifier ...