1. 程式人生 > >CKEditor4.7之使用Java實現圖片上傳功能

CKEditor4.7之使用Java實現圖片上傳功能

1.官網下載CKEditor,基礎包,標準包,全包選擇其一。地址:https://ckeditor.com/ckeditor-4/download/

2.下載檔案後將其解壓至WebRoot資料夾下,解壓前可以新建一個包檔案FckEditor

3.開啟ckeditor\plugins\image\dialogs\image.js檔案,在開啟的檔案搜尋hidden,找到Upload 將它後面的 !0修改為0

 4.開啟CKEditor根目錄下的ckeditor.js 在裡面新增下面這句話

    config.image_previewText=' '; //預覽區域顯示內容
    config.filebrowserUploadUrl = '/cescp/MenuInfoAction_imgUpload.action';  

5.imgUpload方法

//新聞圖片上傳伺服器
	private File upload; // 檔案
	private String uploadContentType; // 檔案型別
	private String uploadFileName; // 檔名
 
	/**
	 * 圖片上傳
	 * 
	 * @return
	 * @throws IOException
	 */
	public String imgUpload() throws IOException {
 
		// 獲得response,request
		HttpServletResponse response = ServletActionContext.getResponse();
		HttpServletRequest request = ServletActionContext.getRequest();
 
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		// CKEditor提交的很重要的一個引數
		String callback = request.getParameter("CKEditorFuncNum");
		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(" + callback
					+ ",''," + "'檔案格式不正確(必須為.jpg/.gif/.bmp/.png檔案)');");
			out.println("</script>");
			return null;
		}
		if (upload.length() > 600 * 1024) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'檔案大小不得大於600k');");
			out.println("</script>");
			return null;
		}
 
		InputStream is = new FileInputStream(upload);
		//圖片上傳路徑
		String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/uploadImg");
		String fileName = java.util.UUID.randomUUID().toString(); // 採用時間+UUID的方式隨即命名
		fileName += expandedName;
		File file = new File(uploadPath);
		if (!file.exists()) { // 如果路徑不存在,建立
			file.mkdirs();
		}
		File toFile = new File(uploadPath, fileName);
		OutputStream os = new FileOutputStream(toFile);
		byte[] buffer = new byte[1024];
		int length = 0;
		while ((length = is.read(buffer)) > 0) {
			os.write(buffer, 0, length);
		}
		is.close();
		os.close();
 
		// 返回"影象"選項卡並顯示圖片  request.getContextPath()為web專案名 
		out.println("<script type=\"text/javascript\">");
		out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
				+ ",'" + request.getContextPath() + "/img/uploadImg/" + fileName + "','')");
		out.println("</script>");
		return null;
	}
 
	public File getUpload() {
		return upload;
	}
 
	public void setUpload(File upload) {
		this.upload = upload;
	}
 
	public String getUploadContentType() {
		return uploadContentType;
	}
 
	public void setUploadContentType(String uploadContentType) {
		this.uploadContentType = uploadContentType;
	}
 
	public String getUploadFileName() {
		return uploadFileName;
	}
 
	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}

6.效果圖