非常多公司的图片会走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 οnlοad="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