環(huán)境：java,springmvc,ckeditor,tomcat,maven

情況：在做項目的時候發(fā)現(xiàn)本地圖片粘貼到ckeditor中，img標(biāo)簽的src中的值是“data:image/png;base64,”開頭的，后面會跟一串字符串，圖片越大字符串越長，這樣的圖片在保存的時候一旦放多了過后，后臺不知什么原因拿不到其它的參數(shù)，所以想把這種圖片上傳到后臺在顯示出來。研究了一天的發(fā)覺還是挺簡單的，主要是ckeditor怎么獲取img并獲取src 。下面看一下代碼。

流程：監(jiān)聽change事件-》獲取圖片的二進(jìn)制數(shù)據(jù)，將base64圖片轉(zhuǎn)換成formData再提交到服務(wù)器-》服務(wù)器接收上傳的文件，生成圖片到指定位置，并返回圖片的訪問地址-》js接收回調(diào)數(shù)據(jù)，獲得圖片url-》將獲得的url地址替換掉圖片的二進(jìn)制數(shù)據(jù)

1，定義一個textarea

${article.content}

2,js方法

//粘貼圖片上傳

//延時加載uploadImage方法，否則被默認(rèn)方法覆蓋

$(function(){setTimeout(uplaodImage,400);});

//使用FormData形式，將base64圖片轉(zhuǎn)換成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'){ //判斷是否是二進(jìn)制圖像，是才處理

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(":");//獲得指定字符的第一個下標(biāo)值

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",//服務(wù)器url

async:false,//同步，因為修改編輯器內(nèi)容的時候會多次調(diào)用change方法，所以要同步，否則會多次調(diào)用后臺

data:formdata,

processData: false,

contentType: false,

success:function(json){

var imgurl=json.resultInfo.sysdata.url; //獲取回傳的圖片url

//alert('返回的url='+imgurl);

//獲取并更改到現(xiàn)有的圖片標(biāo)簽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,其它環(huán)境配置

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

總結(jié)

以上是生活随笔為你收集整理的ckeditor java 上传_CKEditor粘贴图片自动上传到服务器（Java版）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。