springMVC和ckeditor图片上传

1.下载ckeditor,我用的是4.6.2_full版本。

2.根据各自项目配置

3.配置好打开ckeditor是这样的 

 打开图片上传是这样的



这段看不懂的鸟文可以在ckeditor_4.6.2_full\ckeditor\plugins\image\dialogs\image.js中删除

在image.js中搜索d.config.image_previewText 找到后面的一文字删除就行


4.接下来配置config.js,可以看到上面的图没有上传项,这个配置后就有了。

打开config.js可以看到基本上什么都没有,在里面写上这样一段话你就可以看到上传项,出来了。

config.filebrowserImageUploadUrl = "/admin/upload/index"; 


"/admin/upload/index"; 这是我的 controller路径,具体的你的需要你自己配置

接下来我们就可以看到上传了


这时候点击上传是没有用的

后台需要接收图片并返回给ckeditor

代码如下

package com.base.util;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;


/**
 * 上传图片
 * <p>
 * 为CKEDITOR定制的图片上传功能
 * </p>
 *
 */
@Controller
@RequestMapping("/upload")
public class ImageUploadUtil {
	protected final Logger logger = Logger.getLogger(ImageUploadUtil.class);


	private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";


	/*
	 * 上传图片文件夹
	 */
	private static final String UPLOAD_PATH = "D:\\file_upload\\image\\";
	/*
	 * tomcat配置的文件路径
	 * 
	 */
	public static final String LOCAL_FILE_PATH = "/static_img/";


	/*
	 * 上传图片
	 */
	@RequestMapping(value = "/index")
	public void uplodaImg(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response){


		try {


			PrintWriter out = response.getWriter();
			String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
			String fileName = file.getOriginalFilename();
			String uploadContentType = file.getContentType();
			String expandedName = "";
			if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
				// IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
				expandedName = ".jpg";
			} else if (uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) {
				// IE6上传的png图片的headimageContentType是"image/x-png"
				expandedName = ".png";
			} else if (uploadContentType.equals("image/gif")) {
				expandedName = ".gif";
			} else if (uploadContentType.equals("image/bmp")) {
				expandedName = ".bmp";
			} else {
				out.println("<script type=\"text/javascript\">");
				out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'',"
						+ "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
				out.println("</script>");
				return;
			}
			if (file.getSize() > 1024 * 1024 * 2) {
				out.println("<script type=\"text/javascript\">");
				out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'文件大小不得大于2M');");
				out.println("</script>");
				return;
			}
			/*
			 * 用当前时间为图片重命名
			 * */
			DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
			fileName = df.format(new Date()) + expandedName;
			file.transferTo(new File(UPLOAD_PATH + "/" + fileName));
			// 返回"图像"选项卡并显示图片
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + LOCAL_FILE_PATH
					+ fileName + "','')");
			out.println("</script>");
			return;
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}


}



然后就完了,启动项目试试吧,这是我看了大半天其他帖子整理出来的,在我的项目中多次试验后成功的


猜你喜欢

转载自blog.csdn.net/muumo/article/details/60118116