環境：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
...)
