环境:java,springmvc,freemaker,ckeditor
在做项目的时候发现本地图片粘贴到ckeditor中,img标签的src中的值是“data:image/png;base64,”开头的,后面会跟一串字符串,图片越大字符串越长,这样的图片在保存的时候一旦放多了过后,后台不知什么原因拿不到其它的参数,所以想把这种图片上传到后台在显示出来。研究了一天的发觉还是挺简单的,主要是ckeditor怎么获取img并获取src 。下面看一下代码。
Js代码
function uplaodImage(){ CKEDITOR.instances.editor.on('change',function(e){ var a = e.editor.document ; var b = a.find("img"); var count = b.count(); for(var i=0;i<count;i++){ var src =b.getItem(i).$.src;//获取img的src if(src.substring(0,4)=='data'){ var url = 后台请求路径; $.ajax({ type:"POST", url:url, async:false,//同步,因为修改编辑器内容的时候会多次调用change方法,所以要同步,否则会多次调用后台 data:{'src':src}, success:function(json){ var data = eval("("+json+")"); if(data.success){ b.getItem(i).$.src=data.url; } } }); } } }); }
|
这里要注意,调用这个方法需要延时,即要在ckeditor加载完后在重写change方法,要不然就会被ckeditor的默认方法覆盖
$(function(){setTimeout(uplaodImage,400);}); |
Java代码
/** * ckeditor粘贴的图片上传并返回访问路径 * @param request * @param response */ public void uploadImage(HttpServletRequest request,HttpServletResponse response){ try { String src=request.getParameter("src"); if(src==null || src.trim().length()==0){ JsonUtils.sendJson("{'success':false}", response); }else{ String[] srcArr = src.split(";base64,");//data:image/png;base64,iVBORw0KGgoAA //文件后缀 String fileSuffixes = srcArr[0].split("/")[1];//data:image/png BASE64Decoder decoder = new BASE64Decoder(); byte[] b = decoder.decodeBuffer(srcArr[1]); for(int i=0;i<b.length;++i){ if(b[i]<0){//调整异常数据 b[i]+=256; } } //文件名称 Calendar cal = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS"); String filename = sdf.format(cal.getTime()); //图片保存路径 String filePath=fileUpLoadUrl+IMAGE_UPLOAD_PATH+"/"+filename+"."+fileSuffixes; //图片访问路径 String fileurl=getPath(request)+fileVisitUrl+IMAGE_UPLOAD_PATH+"/"+filename+"."+fileSuffixes; OutputStream out = new FileOutputStream(filePath); //生成图片 out.write(b); out.flush(); out.close(); JsonUtils.sendJson("{'success':true,'url':'"+fileurl+"'}", response); } } catch (Exception e1) { e1.printStackTrace(); JsonUtils.sendJson("{'success':false}", response); }
} /** * 获取访问路径 http://192.168.2.84:8080 * @param request * @return */ private String getPath(HttpServletRequest request){ String scheme = request.getScheme(); int port = request.getServerPort(); String serverName = request.getServerName(); String contextPath = "";//request.getContextPath(); //请求路径 String path = scheme + "://" + serverName+":"+ port + contextPath; return path; } |
其中,访问路径需要在tomcat中配置,
如:保存路径 E://upload/img
访问路径 /view
<Context debug="0" docBase=" E:\upload\img " path="/ view " reloadable="false"/> |