`
gwh_08
  • 浏览: 335389 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ckeditor插入图片servlet实现

    博客分类:
  • Ext
阅读更多

在博客中看到了一位大侠的ckeidtor的图片上传的servlet实现,写的很好,也给了我思路,但是图片上传后,是自动保存在了tomcat的服务器上的,对于图片的管理有些不方便,现对代码进行一些改进,支持将图片放在指定的目录下。

首先在ckeidtor的配置文件config.js中将上传配置打开:脚本如下:

config.filebrowserImageUploadUrl = '../CKEditorImageServlet?Type=Image';

 

然后就是web.xml文件的配置了:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
    
  <servlet>
    <servlet-name>CKEditorImageServlet</servlet-name>
    <servlet-class>com.jabberchina.poms.servlet.CKEditorImageServlet</servlet-class>
    <init-param>
      <param-name>allowedImageExtensions</param-name>
      <param-value>jpg|gif|jpeg|png|bmp</param-value>
    </init-param>
    <load-on-startup>0</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>CKEditorImageServlet</servlet-name>
    <url-pattern>/CKEditorImageServlet</url-pattern>
  </servlet-mapping>
  
  <session-config>
    <session-timeout>30</session-timeout>
  </session-config>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

  主要是Servlet文件上传的扩展名规则,就是允许上传的类型和阻止上传的类型。与要拦截的URL。

下面就是Servlet的实现了:

package com.servlet;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FilenameUtils;
import org.springframework.context.ApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;

import com.dao.CkeditorImageDAO;

public class CKEditorImageServlet extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = -735481391001655214L;
	private CkeditorImageDAO ckeditorImageDAO;

	/**
	 * Servlet初始化方法
	 */
	public void init() throws ServletException {
		ApplicationContext ac = WebApplicationContextUtils
				.getRequiredWebApplicationContext(getServletContext());
		ckeditorImageDAO = (CkeditorImageDAO) ac.getBean("ckeditorImageDAO");
	}

	public void destroy() {
		ckeditorImageDAO = null;
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String fileName = request.getParameter("fileName");
		String extensionName = FilenameUtils.getExtension(fileName);
		response.setContentType("image/" + extensionName);
		BufferedImage bufferImage = ckeditorImageDAO.getFromDisk(fileName);
		ImageIO.write(bufferImage, extensionName, response.getOutputStream());
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();
		String imageURL = "";
		try {
			imageURL = ckeditorImageDAO.saveTODisk(request);
		} catch (Exception e) {
			e.printStackTrace();
		}
		// CKEditorFuncNum是回调时显示的位置,这个参数必须有
		String callback = request.getParameter("CKEditorFuncNum");
		out.println("<script type=\"text/javascript\">");
		out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
				+ ",'" + imageURL + "',''" + ");");
		out.println("</script>");
		out.flush();
		out.close();
	}

}


package com.dao.impl;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.List;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FilenameUtils;

import com.dao.CkeditorImageDAO;

public class CkeditorImageDAOImpl implements CkeditorImageDAO{
	private String dataFilePath;
	private String ckeditorImageServletPath;

	public String getCkeditorImageServletPath() {
		return ckeditorImageServletPath;
	}

	public void setCkeditorImageServletPath(String ckeditorImageServletPath) {
		this.ckeditorImageServletPath = ckeditorImageServletPath;
	}

	public String getDataFilePath() {
		return dataFilePath;
	}

	public void setDataFilePath(String dataFilePath) {
		this.dataFilePath = dataFilePath;
	}

	@SuppressWarnings("unchecked")
	public String saveTODisk(HttpServletRequest request) throws Exception {
		String imageURL = "";

		// 判断文件夹是否存在,不存在则创建
		File dirTest = new File(dataFilePath);
		if (!dirTest.exists()) {
			dirTest.mkdirs();
		}

		ServletFileUpload upload = new ServletFileUpload(
				new DiskFileItemFactory());
		try {
			List<FileItem> items = upload.parseRequest(request);
			if (items != null && !items.isEmpty()) {
				FileItem fileItem = items.get(0);//目前ckeditor编辑器只允许同时上传一个图片文件,所以只处理第一个即可

				String fileName = new Date().getTime() + "."
						+ FilenameUtils.getExtension(fileItem.getName());//获取文件扩展名
				File pathToSave = new File(dataFilePath, fileName);
				fileItem.write(pathToSave);

				imageURL = this.ckeditorImageServletPath + fileName;
			}
		} catch (Exception ex) {
			throw ex;
		}
		return imageURL;
	}

	public BufferedImage getFromDisk(String fileName) throws IOException {
		File file = new File(dataFilePath + fileName);
		BufferedImage bufferImage = ImageIO.read(file);
		return bufferImage;
	}

}

  dataFilePath为图片要上传到磁盘路径:如为:D:/poms_workspace/upload/

ckeditorImageDAO与ckeditorImageServletPath 需要在spring的配置文件中进行配置:

<bean id="ckeditorImageDAO" name="ckeditorImageDAO"
	class="com.jabberchina.poms.dao.impl.CkeditorImageDAOImpl" scope="prototype">
    <property name="dataFilePath" value="${dataFilePath}"></property>
    <property name="ckeditorImageServletPath" value="../CKEditorImageServlet?fileName="></property>
</bean>

 

 

 

package com.dao;

import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

public interface CkeditorImageDAO {
	public String saveTODisk(HttpServletRequest request) throws Exception;
	public BufferedImage getFromDisk(String fileName) throws IOException;

}

 

此servlet实现写在了一个servlet中,可以分别写两个servlet,一个是上传图片,一个是读取图片。在此取了个巧,因为上传文件时,是以表单的方式post上去的,所以写在doPost方法中,而对于图片的读取我们用的是"URL?fileName="的get形式发送的请求,所以写在了doGet方法中实现。

分享到:
评论

相关推荐

    ckeditor 图片图片本地上传

    CKEditor提供了丰富的文本格式化选项,如字体、大小、颜色、对齐方式等,以及插入图片、链接和多媒体功能。在"ckeditor 图片图片本地上传"这个主题中,我们将深入探讨如何在CKEditor中实现图片的本地上传功能,这...

    整合ckeditor+ckfinder实现图片或文件上传功能

    `ckeditor`提供了丰富的文本编辑功能,包括字体、字号、颜色、对齐方式等设置,以及插入图片、链接、表格等操作。它通过HTML和JavaScript实现,可以通过下载官方提供的SDK,按照其文档说明进行集成到你的JAVA项目中...

    CKeditor v3.2.1 JSP增强版 - 【带Servlet上传功能+完整源码+实例】.rar

    CKeditor是一款广泛使用的开源富文本编辑器,它提供了丰富的文本格式化选项,如字体、字号、颜色、对齐方式等,还支持插入图片、链接、表格等功能。CKeditor v3.2.1是其历史版本之一,尽管现在有更高级的版本,但这...

    ckeditor jsp 上传图片例子 免费下载

    在本文中,我们将深入探讨如何在Java环境下,利用JSP(JavaServer Pages)和CKEditor实现图片上传功能。CKEditor是一款流行的富文本编辑器,它为网页内容编辑提供了丰富的功能,包括图片上传。我们将从标题和描述中...

    ckeditor for java 上传图片功能

    CKEditor本身是一个JavaScript库,通过在前端创建一个可编辑的区域,用户可以在此区域内输入文本、插入图片等。当用户选择上传图片时,CKEditor会通过Ajax或表单提交方式将图片数据发送到服务器端。因此,实现图片...

    ckeditor4添加上传视频插件

    在IT行业中,富文本编辑器CKEditor 4是一款广泛应用的在线文本编辑工具,它提供了丰富的功能,如格式化、图片上传、链接插入等,极大地提升了用户在网页上的文本编辑体验。"ckeditor4添加上传视频插件"这个主题,是...

    servlet实现Ceditor4.13图片上传

    Ckeditor是一款强大的富文本编辑器,广泛应用于网页内容编辑,它支持多种功能,包括插入图片。Servlet是Java Web开发中的一个重要组件,用于处理HTTP请求和响应,非常适合用来处理文件上传这样的任务。 ### 1. ...

    带图片上传文件上传的CKEditor(java实现后台文件存储)

    文件路径可能会被编码并返回给CKEditor,以便在编辑器中插入图片。 `uploader`目录可能包含了一个或多个处理上传请求的Servlet或者Controller,它们接收来自CKEditor的POST请求,调用`FileUploadUtil`进行文件处理...

    ckeditor在线编辑器,实现在线上传图片和falsh文件

    6. **编辑器更新**:CKEditor接收到响应后,根据返回的URL在编辑器内插入图片。 对于Flash文件的上传,其流程基本与图片上传相似,只是处理的文件类型不同。CKEditor同样提供了一个Flash插入工具,用户可以选择本地...

    201812CKEditor粘贴屏幕截图上传图片、使用HttpServlet接收文件实现

    这个功能极大地提升了在线文档编辑的效率,特别是对于需要频繁插入图片的场景,如编写博客、论坛发帖等。 屏幕截图功能通常依赖于操作系统或者浏览器的API,例如Windows系统的Print Screen键或者浏览器的Web ...

    CKEditor3.x配置使用教程,支持图片上传其中图片上传支持Ftp

    总结起来,这个教程将指导你如何配置CKEditor3.x以支持图片上传,包括集成CKEditor、配置图片上传的URL、设置FTP服务器、编写处理图片上传的Servlet,以及在实际项目中应用这些配置。通过学习和实践这个教程,你将...

    JSP使用ckeditor和ckfinder实现富文本及文件上传

    这样,当用户在ckeditor中点击“插入图片”或“插入链接”时,ckfinder会弹出,用户可以选择本地文件进行上传。 文件上传功能的实现通常涉及服务器端的处理,例如使用Servlet。在JSP中,可以通过表单提交的方式触发...

    ckeditor 带上传例子 for java jsp

    在CKEditor中,用户可以插入图片、文件或其他媒体内容,而上传功能就是实现这一需求的关键。它允许用户从本地选择文件,并将其上传到服务器。这个例子提供了如何在Java后端与JSP前端结合使用CKEditor实现文件上传的...

    ckeditor-java-3.6.4.zip

    - Java集成:虽然CKEditor主要是JavaScript实现,但可以通过Java在服务器端处理CKEditor提交的数据,例如使用Java Servlet或Spring MVC框架来接收和处理编辑器内容。 - Java API:CKEditor可以与Java应用进行交互...

    ckeditor demo

    为了进一步提高用户体验,你还可以实现上传图片功能。CKEditor支持文件上传,你需要在服务器端设置一个接收文件的接口。例如,你可以创建一个Servlet来处理上传请求,并将文件保存到服务器。同时,确保在CKEditor...

    ckeditor-java-core-3.5.3

    "ckeditor-java-core-3.5.3"是CKEditor的Java版,它使得Java开发者能够将CKEditor的富文本编辑功能引入到Java Web应用中,如Servlet、JSP、Spring MVC等框架。这个版本可能包含了Java API、库文件和其他必要的资源...

    ckeditor+ckeditor-java+ckfinder

    CKEditor是一款流行的开源富文本编辑器,广泛应用于网页内容编辑,它提供了丰富的文本格式化选项、图片处理、链接插入等功能。CKEditor以其易用性、可定制性和跨浏览器兼容性著称,支持多种编程语言环境,如...

    ckeditor java版

    1. **富文本编辑**:支持插入图片、链接、表格、列表等HTML元素,提供多种预设样式。 2. **格式化工具**:如加粗、斜体、下划线、字体大小和颜色调整等。 3. **撤销/重做**:方便用户快速修正误操作。 4. **源代码...

    ckeditor支持文件上传的java类

    为了增强其功能,CKEditor通常会集成文件上传功能,让用户能够方便地在编辑器中插入本地图片或文件。在Java后端,我们需要编写特定的类来处理这些文件上传请求。下面我们将详细讨论CKEditor文件上传的Java实现以及...

    jspupload.rar_ckeditor java

    CKEditor是一款广泛使用的富文本编辑器,它允许用户在网页上创建和编辑内容,包括插入图片、文件等。在Java Web开发中,实现CKEditor的文件上传功能通常涉及到后端服务器的处理,例如使用JSP(JavaServer Pages)来...

Global site tag (gtag.js) - Google Analytics