kindeditor4跨域上传图片解决
非常多公司的图片会走CDN，须要单独的一台图片上传服务如：（upload.268xue.com）
kindeditor上传图片的简单内部流程：
iframe的onload方法获取返回的值。然后调用配置回调方法afterUpload/afterError。
详细实现:（在a.com选中图片，上传用upload.268xue.com，返回上传的结果给a.com。我的项目springmvc）：
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中用到。期望改动掉。
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。没有特殊的地方。
<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个。
如：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
kindeditor4跨域上传图片解决的更多相关文章
- ueditor富文本编辑器跨域上传图片解决办法
在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?
AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...
- Ajax跨域访问解决办法
方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
- 项目二(业务GO)——跨域上传图片(请求接口)
之前,就听过“跨域上传”图片的问题,只是疏于研究,也就一再搁置,直至今天再次遇见这个不能避免的“坑”,才不得不思考一下,怎么“跨域上传”图片或者文件? 问题来源: 何为“跨域”? ——就是给你一个接口 ...
- 跨域请求解决方法(JSONP, CORS)
1.跨域 假设我们页面或者应用部署在 http://www.aaa.com 上了,而我们打算从 http://www.bbb.com 请求提取数据.一般情况下,如果我们直接使用 AJAX 来请求将会失 ...
- 基于.Net Framework 4.0 Web API开发（5）：ASP.NET Web APIs AJAX 跨域请求解决办法（CORS实现）
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...
- 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
随机推荐
- 内网使用 IPV6 之 TunnelBroker隧道（6in4）篇
内网使用 IPV6 之 TunnelBroker隧道(6in4)篇 据非专业网民推测 tunnelbroker isatap 和 6to4 貌似都需要公网,但有网民测试这位大作的方法可行.特别之处是 ...
- 82.管道实现cgi内存多线程查询
总体思路就是客户端写入要查询的数据到管道中,服务器端从管道读取,然后写入随机文件,再把文件名写入管道,然后客户端再读取文件 服务器端 设置缓冲区大写,设置管道名字,以及标识有多少个线程等 //设置缓存 ...
- 编译安装PHP-7.2.8
一 下载并软件包 wget http://124.205.69.169/files/A218000006E9730A/cn2.php.net/distributions/php-7.2.8.tar.g ...
- subline Text3 安装及汉化
因为自己的subline 有问题 所以决心重新改一下了. 三步: http://www.sublimetext.com/3 官网下载subline3 https://www.imjeff. ...
- Mysql5.7.19压缩版安装步骤及踩过的坑
安装Mysql5.7.19压缩版 一:下载压缩包 1.从MySQL官网下载MySQL Community Server 5.7.19,此版本为免费版. 2.下载完成之后解压缩,打开之后文件夹如下: ...
- FansMail：邮件发送标准API与技术实现(Java)
发送邮件,是Web系统等IT建设中最常见的一种功能. 我对最常见的一种需求进行了抽象和封装,定义了一套标准的API,并且使用Java技术实现. 项目信息 项目名称:FansMail 项目作者:LeiW ...
- C# mongodb帮助类
这是在C#连接MongoDB的帮助类,所使用的驱动是在Vs2015的Nuget管理器中下载的mongodb驱动. 下载第一个,会自动下载下面的两个,不要删除. 在配置文件中配置连接字符串connStr ...
- WebClient HttpWebRequest从网页中获取请求数据
WebClient HttpWebRequest //HttpWebRequest webRequest = (HttpWebRequest)WebRequest.Create(urlAddress) ...
- js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么
js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么 一.总结 一句话总结:$.getScript()和$.getJSON()方法专门用来加载JS/JSON文件(远程 ...
- EXT gridPanel 添加图片
var workAreaGrid = new Ext.grid.GridPanel({ region: 'west', title: '工作面预警结果', store: wkSto, width: , ...