使用apche的fileupload实现ckeditor的上传功能

简介: html: ckeditor_upload.html window.onload = function() { CKEDITOR.

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ckeditor_upload.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			CKEDITOR.replace("content",{
				width: 600,
				height: 400,
				filebrowserFileUploadUrl : 'servlet/upload?type=file',
				filebrowserImageUploadUrl : 'servlet/upload?type=image', 
			    filebrowserFlashUploadUrl : 'servlet/upload?type=flash'
			});
		};
	</script>

  </head>
  
  <body>
  	<div id="content"></div>
  </body>
</html>

 

 

 

servlet:

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class Upload extends HttpServlet {

	private List<String> allowedImages = new ArrayList<String>();
	private String uploadPath;
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * 利用firebug可以看到ckeditor给我们生成了这样一段代码
	 * <form lang="zh-cn" action="servlet/upload?type=image&CKEditor=content&CKEditorFuncNum=1&langCode=zh-cn" dir="ltr" method="POST" enctype="multipart/form-data">
	 * 		<input type="file" size="38" name="upload">
	 * </form>
	 * 可以知道ckeditor上传图片是提交到了servlet/upload?type=image&CKEditor=content&CKEditorFuncNum=1&langCode=zh-cn
	 * 这里面的CKEditorFuncNum是页面传过来的回调方法,在上传成功后应该回调这个方法,使生成的图片在预览窗口进行显示
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String type = request.getParameter("type");
		FileItemFactory itemFactory = new DiskFileItemFactory();
		ServletFileUpload servletFileUpload = new ServletFileUpload(itemFactory);
		try {
			FileItemIterator itemIterator = servletFileUpload.getItemIterator(request);
			//因为ckeditor只是上传文件,所以这里就可以这样写了
			if (itemIterator.hasNext()) {
				FileItemStream itemStream = itemIterator.next();
				String name = itemStream.getName();
				InputStream inputStream = itemStream.openStream();
				String tagName = getTagName(name);
				if (allowedImages.contains(tagName) && "image".equals(type)) {
					String fileName = this.geneFileName(tagName);
					this.upload(inputStream, fileName);
					String callback = request.getParameter("CKEditorFuncNum");
					response.setContentType("text/html;charset=utf-8");
					PrintWriter out = response.getWriter();
					out.write("<script type=\"text/javascript\">");
					out.write("window.parent.CKEDITOR.tools.callFunction("+callback+",'ckeditor/upload/"+fileName+"',''"+")");
					out.write("</script>");
				}
			}
		} catch (FileUploadException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	@Override
	public void init(ServletConfig config) throws ServletException {
		// TODO Auto-generated method stub
		String allowedImage = config.getInitParameter("allowedImage");
		String[] images = allowedImage.split(",");
		for (String image:images)
			allowedImages.add(image);
		uploadPath = config.getServletContext().getRealPath("/ckeditor/upload");
	}

	private String getTagName(String fileName) {
		int index = fileName.lastIndexOf(".")+1;
		return fileName.substring(index);
	}
	
	private String geneFileName(String tagName) {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
		return sdf.format(new Date()) + "." + tagName;
	}
	
	private void upload(InputStream inputStream, String fileName) throws IOException {
		File file = new File(uploadPath, fileName);
		OutputStream os = new FileOutputStream(file);
		byte[] bytes = new byte[1024];
		int len = 0;
		while ((len = inputStream.read(bytes)) != -1) {
			os.write(bytes, 0, len);
		}
		inputStream.close();
		os.close();
	}
	
}

 

web.xml:

<?xml version="1.0" encoding="GB18030"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <servlet-name>Upload</servlet-name>
    <servlet-class>com.tiantian.ext.servlet.Upload</servlet-class>
    <init-param>
    	<param-name>allowedImage</param-name>
    	<param-value>jpg,jpeg,gif,png</param-value>
    </init-param>
    
  </servlet>

  <servlet-mapping>
    <servlet-name>Upload</servlet-name>
    <url-pattern>/servlet/upload</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
目录
相关文章
|
前端开发 文件存储 数据库
SpringMVC文件上传、文件下载多文件上传及jrebel的使用与配置1
SpringMVC文件上传、文件下载多文件上传及jrebel的使用与配置1
80 0
SpringMVC文件上传、文件下载多文件上传及jrebel的使用与配置2
SpringMVC文件上传、文件下载多文件上传及jrebel的使用与配置2
56 0
|
前端开发
SpringMVC文件上传、文件下载多文件上传及jrebel的使用与配置3
SpringMVC文件上传、文件下载多文件上传及jrebel的使用与配置3
68 0
|
7月前
|
JavaScript 前端开发
javaweb文件上传和下载
javaweb文件上传和下载
|
Java 应用服务中间件
JavaWeb 文件上传和下载
JavaWeb——文件上传与下载 内容分享。
219 0
|
JavaScript 前端开发 数据库
JavaWeb18(文件上传&富文本编辑器)
JavaWeb18(文件上传&富文本编辑器)
|
安全 Java Apache
【JavaWeb】之文件上传与下载
【JavaWeb】之文件上传与下载
429 0
【JavaWeb】之文件上传与下载
|
前端开发 数据库
struts2实现的文件上传下载案例(二)、FileUpLoad文件的下载
struts2实现的文件上传下载案例(二)、FileUpLoad文件的下载
113 0
|
前端开发 JavaScript Java
IDEA maven web项目无法加载css,js,image等一系列路径问题
我们大二班级 刚刚学习maven 控制台输出 和mybatis的时候我提前进入学习的路程自己摸索 maven web开发 遇到了各种配置环境还有运行报错一大堆的问题, 前面的问题都属于环境配置看我之前的博客吧 这里主要讲解路径问题 步入:很多新手按照之前的步骤 部署网站的时候 发现css,js,image,还有各种有关路径的引入都无法显示,因为这些静态资源很有可能被spring拦截 方案:必须在web.xml文件中设置其为可加载资源
IDEA maven web项目无法加载css,js,image等一系列路径问题
|
前端开发 JavaScript Java
关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行。既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题。 大家可能经常会用到富文本编辑器,今天我要说的是UEditor的使用,这是一个简单易用的开源富文本编辑器。
3428 0