首页 > 代码库 > kindeditor4跨域上传图片解决
kindeditor4跨域上传图片解决
项目中正在使用kindeditor, 版本4.1.10
很多公司的图片会走CDN,需要单独的一台图片上传服务如:(upload.268xue.com)
很多公司的图片会走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):
iframe的onload方法获取返回的值,然后调用配置回调方法afterUpload/afterError。
具体实现:(在a.com选中图片,上传用upload.268xue.com,返回上传的结果给a.com,我的项目springmvc):
跨域中使用需要修改2个地方:1.上传后的返回方式,2回调的页面处理。
1.upload.268xue.com的上传方法:
@RequestMapping(value = http://www.mamicode.com/"/upload", method = RequestMethod.POST)> 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=http://www.mamicode.com/getParameter("s");>
其中参数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(错误时再尝试下转码)
自己的处理,低级的地方多指正学习。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。