项目中正在使用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的上传方法：
  1. @RequestMapping(value = "/upload", method = RequestMethod.POST)
  2.     public String upload(HttpServletRequest request, HttpServletResponse response) {
  3.         try {
  4.             String referer = request.getHeader("referer");
  5.             Pattern p = Pattern.compile("([a-z]*:(//[^/?#]+)?)?", Pattern.CASE_INSENSITIVE);
  6.             Matcher mathcer = p.matcher(referer);
  7.             if (mathcer.find()) {
  8.                 String callBackPath = mathcer.group();// 请求来源a.com
  9.                 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  10.                 MultipartFile imgFile = multipartRequest.getFile("fileupload");//k4中fileupload
  11.                 //JsonObject json =自己的处理imgFile
  12.                 // 同域时直接返回json.toString()就可以无需redirect
  13.                 String url = "redirect:" + callBackPath + "/kindeditor/plugins/image/redirect.html?s=" + json.toString() + "#" + json.toString();
  14.                 logger.info(String.format("upload success url:%s", url));
  15.                 return url;
  16.             } else {
  17.                 logger.info("upload referer not find");
  18.             }
  19.         } catch (Exception e) {
  20.             logger.error("upload error", e);
  21.         }
  22.         return null;
  23.     }

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

  1. upload success url:http://a.com/kindeditor/plugins/image/redirect.html?
  2.  
  3. 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中编辑器的初始化：
  1. 	var uploadbutton = KindEditor.uploadbutton({
  2. 		button : KindEditor("fileupload")[0],
  3. 		fieldName : "fileupload",
  4. 		url : "http://upload.268xue.com/upload",
  5. 		afterUpload : function(data) {
  6. 			if (data.error == 0) {
  7. 	           	 //data.url 处理
  8. 			} else {
  9. 				alert("error");
  10. 			}
  11. 		},
  12. 		afterError : function(str) {
  13. 			//alert('error: ' + str);
  14. 		}
  15. 	});
  16. 	uploadbutton.fileBox.change(function(e) {
  17. 		uploadbutton.submit();
  18. 	});

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

3.a.com中kindeditor\plugins\image\redirect.html内容：
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>ie shit shit</title>
  5. <script type="text/javascript">
  6. 		//获取url參数
  7. 	    function getParameter(val) {
  8. 	    	var uri = window.location.search;
  9. 	    	var re = new RegExp("" + val + "=([^&?
  10.  
  11. ]*)", "ig");
  12. 	    	return ((uri.match(re)) ?
  13.  
  14. (uri.match(re)[0].substr(val.length + 1)) : null);
  15. 	    }
  16.         var upload_callback = function(){
  17.         	var data=getParameter("s");
  18.         	var location_hash=location.hash;
  19.         	//ie6取不到hash??
  20.  
  21. ?用那个方式取？暂使用url传參数s
  22.         	if(location_hash!=null && location_hash!="" && location_hash){
  23.         		 var data = location.hash ? location.hash.substring(1) : '';
  24.                  document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data  + '</pre>';
  25.         	}else{
  26.         		 var data=getParameter("s");
  27.         		 document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data  + '</pre>';
  28.         	}
  29.         };
  30.     </script>
  31. </head>
  32. <body onload="upload_callback();">
  33. </body>
  34. </html>

当中參数s和#号自己处理下能够仅仅用1个。


以上IE6、7、8、9、10、火狐、chrome測试通过。苹果浏览器safari測试未通过。

===========================================================
safari下原因：请求redirect.html后iframe的onload调用处理时转为json时出错：
  1. 如：http://a.com/kindeditor/plugins/image/redirect.html?
  2.  
  3. 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. Eclipse中Git插件使用技巧：[5]还原文件

    如果修改了某个文件并未提交至本地库(add index),那么怎么还原呢?Git插件中并不像Svn插件直接提供有还原方式.其实无论是否提交至本地库或者远程库,还原操作的本质都是将文件的当前版本还原至之 ...

  2. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  3. django 简单会议室预约（2）

    --我们先打开settings.py 配置文件: import os #指明django APP目录路径 BASE_DIR = os.path.dirname(os.path.dirname(os.p ...

  4. Docker---(9)Docker中容器无法停止无法删除

    原文:Docker---(9)Docker中容器无法停止无法删除 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/w ...

  5. opencv cvPreCornerDetect

    关于OpenCv中cvPreCornerDetect 运行出错解决方法 http://m.blog.csdn.net/blog/wode0239 由于书本上示例的不全,相信大家在做的时候,肯定是无从下 ...

  6. MyBatis学习总结（13）——Mybatis查询之resultMap和resultType区别

    MyBatis的每一个查询映射的返回类型都是ResultMap,只是当我们提供的返回类型属性是resultType的时候,MyBatis对自动的给我们把对应的值赋给resultType所指定对象的属性 ...

  7. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  8. 从大整数乘法的实现到 Karatsuba 快速算法

    Karatsuba 快速乘积算法是具有独特合并过程(combine/merge)的分治算法(Karatsuba 是俄罗斯人).此算法主要是对两个整数进行相乘,并不适用于低位数(如 int 的 32 位 ...

  9. jquery 获取上一个兄弟元素和下一个兄弟元素

    jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQu ...

  10. SOAP消息结构

    邵盛松 2012-5-22 一 SOAP消息结构 SOAP消息包括以下元素 必需的 Envelope 元素,可把此 XML 文档标识为一条 SOAP 消息,XML文件的顶层元素,代表该文件为SOAP消 ...