ckeditor in jsp image upload feature to increase

ckeditor ckfinder can be achieved with the image upload function, but only php and asp support, a few days to find information, and finally succeeded in jsp also to achieve this functionality.
Reference: @ 126/blog/static/890531092010226023136 /

First-come effect chart

ckeditor in jsp image upload feature to increase

ckeditor in jsp image upload feature to increase

ckeditor in jsp image upload feature to increase

First of all, completely generated in the editor after the call addUploadButton (editor) function, the incoming editor variable, suggested CKEDITOR.replace used directly after.

function addUploadButton (editor) (
CKEDITOR.on ('dialogDefinition', function (ev) (

var dialogName =;

var dialogDefinition =;

if (dialogName == 'image') (

var infoTab = dialogDefinition.getContents ('info');

infoTab.add ((

type: 'button',

id: 'upload_image',

align: 'center',

label: 'Upload'

onClick: function (evt) (

var thisDialog = this.getDialog ();

var txtUrlObj = thisDialog.getContentElement ('info', 'txtUrl');

var txtUrlId = txtUrlObj.getInputElement ().$. id;

addUploadImage (txtUrlId);


), 'Browse'); / / place front of the browser button



function addUploadImage (theURLElementId) (

var uploadUrl = "upload.jsp"; / / This is my own deal with file / image upload page URL

var imgUrl = window.showModalDialog (uploadUrl);

/ / After the upload through the js code window.returnValue =... image url can be returned to the imgUrl variable.

var urlObj = document.getElementById (theURLElementId);

urlObj.value = imgUrl;
/ / Alert (urlObj.value);
/ / UrlObj.fireEvent ("onchange"); / / trigger the url text box onchange event to preview image
/ / UrlObj.fireEvent ("onchange");
/ / UrlObj.onchange ();

/ / The following only supports firefox
var evt = document.createEvent ('HTMLEvents');
evt.initEvent ('change', true, true);
urlObj.dispatchEvent (evt);


There must be reminded to note that different browsers is not the same event-driven, the place cards had me for a long time, because the reason I use firefox debugging, urlObj.fireEvent ("onchange"); phrase code is not working for .
addUploadImage function specify file upload page URL, and then in a modal window to open this page, handling file uploads. The end result is the image uploaded on the server's URL address is returned to a variable imgUrl. Last assignment to pass this variable entered the picture URL text box. Onchange event manually trigger the final look, so you can see in the image dialog in the preview image.

Jsp page to upload the following:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <link rel="stylesheet" type="text/css" href="styles.css">


    <form name="form1" method="post" action="" enctype="multipart/form-data">
            <input type="file" name="imgFile" title=" Select picture  " />
            <input type="submit" value=" Upload  "/>
            <input type="hidden" value="${requestScope.pagePath}" name="pagePath" />
    <script type="text/javascript">
            var _pagePath = document.getElementById("_pagePath").value;

            if(null!=_pagePath  && ""!=_pagePath){




From the background of the treatment I used to write struts1.2

package com.newsManage_10.struts.form;

import org.apache.struts.action.ActionForm;
import org.apache.struts.upload.FormFile;

public class UploadForm extends ActionForm {

        private static final long serialVersionUID = 1L;
        private FormFile imgFile;

        public FormFile getImgFile() {
           return imgFile;

        public void setImgFile(FormFile imgFile) {
           this.imgFile = imgFile;



package com.newsManage_10.struts.action;

import java.util.Date;

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

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import org.apache.struts.upload.FormFile;

import com.newsManage_10.struts.form.UploadForm;

public class ImgUploadAction extends DispatchAction {

        protected ActionForward unspecified(ActionMapping mapping, ActionForm form,
                        HttpServletRequest request, HttpServletResponse response)
                        throws Exception {
                System.out.println(" Upload pictures  ");
                // Get webroot directory  upload The address of the folder, note if joined  spring Null pointer exception is reported to be changed to
                //ServletContext servletContext = request.getSession().getServletContext();
                //String url = servletContext.getRealPath("/upload") + "\\";
                String url = servlet.getServletContext().getRealPath("/upload") + "\\"; 

                int fsize = 5 * 1024 * 1024;
                UploadForm upf = (UploadForm) form;
                FormFile ffi = upf.getImgFile();
                String fileName = ffi.getFileName();

                if (!((fileName.toLowerCase().endsWith(".jpg"))
                                || (fileName.toLowerCase().endsWith(".gif")) || (fileName
                                .toLowerCase().endsWith(".png")))) {
                        System.out.println(" File type errors will not be able to upload  ");
                        return null;

                if (ffi.getFileSize() > fsize) {
                        System.out.println(" File size is larger than the limit will not be able to upload  ");
                        return null;
                String fname = null;  // Full address
                String shortName = null;  // The file name with the suffix
                try {
                        if ("".equals(fileName)) {
                                return null;
                        InputStream stream = ffi.getInputStream();

                        String extendFile = null;
                        if (isJpg(fileName))
                                extendFile = ".jpg";
                        else if (isGif(fileName))
                                extendFile = ".gif";
                        else if (isPng(fileName))
                                extendFile = ".png";
                                extendFile = ".jpg";

                        shortName = timename() + extendFile;
                        fname = url + shortName;// Rename
                        File imgFile = new File(fname);
                        // If it does not create
                        // Write to the server
                        OutputStream bos = new FileOutputStream(imgFile);
                        int bytesRead = 0;
                        byte[] buffer = new byte[8192];
                        while ((bytesRead =, 0, 8192)) != -1) {
                                bos.write(buffer, 0, bytesRead);

                } catch (FileNotFoundException fnfe) {
                } catch (IOException ioe) {
                } catch (NullPointerException e) {
                // Cannot save  d:\ This address, it is necessary to  url
                String path = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/upload/" + shortName;
                request.setAttribute("pagePath", path);
                return mapping.findForward("success");// Jump to a success page  


        // Time to rename pictures
        public static String timename() {
                String name = null;
                name = Long.toString(new Date().getTime());
                return name;

        //----- Determine file type  ------
        public static boolean isGif(String file) {
                if (file.toLowerCase().endsWith(".gif")) {
                        return true;
                } else {
                        return false;

        public static boolean isJpg(String file) {
                if (file.toLowerCase().endsWith(".jpg")) {
                        return true;
                } else {
                        return false;

        public static boolean isPng(String file) {
                if (file.toLowerCase().endsWith(".png")) {
                        return true;
                } else {
                        return false;


the relevant parts of the configuration file struts as I type with a spring so the content is different

            <forward name="success" path="/upload.jsp" />

<form-bean name="UploadForm" type="com.newsManage_10.struts.form.UploadForm" />

分类:Web 时间:2010-08-28 人气:299
blog comments powered by Disqus


iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 闽ICP备15018612号

processed in 0.075 (s). 12 q(s)