ckeditor java 上传_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

${article.content}

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

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中配置配置上传解析器

4.2，pom.xml引入依赖

commons-fileupload

commons-fileupload

1.3.1

4.3,配置图片的虚拟路径，如

部分参考：http://blog.csdn.net/modernzcl/article/details/18365151

总结

以上是生活随笔为你收集整理的ckeditor java 上传_CKEditor粘贴图片自动上传到服务器（Java版）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。