CKEditor粘贴图片自动上传到服务器（Java版）
环境：java,springmvc,ckeditor,tomcat,maven
情况：在做项目的时候发现本地图片粘贴到ckeditor中，img标签的src中的值是“data:image/png;base64,”开头的，后面会跟一串字符串，图片越大字符串越长，这样的图片在保存的时候一旦放多了过后，后台不知什么原因拿不到其它的参数，所以想把这种图片上传到后台在显示出来。研究了一天的发觉还是挺简单的，主要是ckeditor怎么获取img并获取src 。下面看一下代码。
流程：监听change事件-》获取图片的二进制数据，将base64图片转换成formData再提交到服务器-》服务器接收上传的文件，生成图片到指定位置，并返回图片的访问地址-》js接收回调数据，获得图片url-》将获得的url地址替换掉图片的二进制数据
1，定义一个textarea
<textarea id="content" name="content">${article.content}</textarea>
<!--ckeditor编辑器 初始化设置 -->
<script type="text/javascript"> CKEDITOR.replace('content', {extraPlugins : 'codesnippet',codeSnippet_theme : 'monokai_sublime',height : 520});</script>
2,js方法
//粘贴图片上传
//延时加载uploadImage方法，否则被默认方法覆盖
$(function(){setTimeout(uplaodImage,400);});
//使用FormData形式，将base64图片转换成formData再提交(图片不限制大小)
function uplaodImage(){
CKEDITOR.instances.content.on('change',function(e){//content为textarea的id
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,10)=='data:image'){ //判断是否是二进制图像，是才处理
var img1=src.split(',')[1];
var img2=window.atob(img1);
alert('img2 size='+img2.length);
var ia = new Uint8Array(img2.length);
for (var x = 0; x < img2.length; x++) {
ia[x] = img2.charCodeAt(x);
};
//获得图片的类型
var w1=src.indexOf(":");//获得指定字符的第一个下标值
var w2=src.indexOf(";");
var imgType= src.substring(w1+1, w2);//返回一个包含从 start 到最后（不包含 end ）的子字符串的字符串
var blob=new Blob([ia], {type:imgType});
var formdata=new FormData();
formdata.append('croppedImage',blob);
$.ajax({
type:"POST",
url:"${baseurl}article/uploadImage.action",//服务器url
async:false,//同步，因为修改编辑器内容的时候会多次调用change方法，所以要同步，否则会多次调用后台
data:formdata,
processData: false,
contentType: false,
success:function(json){
var imgurl=json.resultInfo.sysdata.url; //获取回传的图片url
//alert('返回的url='+imgurl);
//获取并更改到现有的图片标签src的值
b.getItem(i).$.src=imgurl;
var a = CKEDITOR.instances.content.document.$.getElementsByTagName("img")[i]; //content为textarea的id
a.setAttribute('data-cke-saved-src',imgurl);
}
});
}
}
});
}
3,后台方法
/**
* ckeditor粘贴图片上传并返回访问路径(不限制图片大小)
* @param imgfile 图片文件
* @return
*/
@RequestMapping(value = "uploadImage", method = RequestMethod.POST)
public @ResponseBody SubmitResultInfo uploadImage(@RequestParam("croppedImage") MultipartFile imgfile) {
try {
//获取 文件后缀
String fileSuffixes =imgfile.getContentType().split("/")[1];// data:image/png
// 生成文件名称
Calendar cal = Calendar.getInstance();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String filename = sdf.format(cal.getTime());
// 生成图片保存路径
String filePath = "E:/temp/tempfile" + "/" + filename + "." + fileSuffixes;
// 图片访问路径
String fileurl = "http://localhost:5080/upimg/" + filename + "." + fileSuffixes;
System.out.println("fileurl=" + fileurl);
// 写文件到磁盘
File newFile = new File(filePath);
imgfile.transferTo(newFile);
//返回url
ResultInfo resultInfo = ResultUtil.createSuccess(Config.MESSAGE, 906, null);
resultInfo.getSysdata().put("url", fileurl);//返回的图片访问路径
return ResultUtil.createSubmitResult(resultInfo);
} catch (Exception e) {
e.printStackTrace();
return ResultUtil.createSubmitResult(ResultUtil.createSuccess(Config.MESSAGE, 911, null));//500错误
}
}
4,其它环境配置
4.1在spinrg-mvc.xml中配置配置上传解析器
<!-- 配置上传解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="52428800" /><!-- 限制上传文件的大小 --> <property name="defaultEncoding" value="UTF-8" /> </bean>
4.2，pom.xml引入依赖
<!-- 上传文件依赖 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
4.3,配置图片的虚拟路径，如
部分参考：http://blog.csdn.net/modernzcl/article/details/18365151
