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