ckeditor in jsp image upload feature to increase

sponsored links
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" />

  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of ckeditor in jsp image upload feature to increase

  • hibernate Technical Study Notes (first)

    Introduction: Model does not match (impedance mismatch) java object-oriented language, object model, its key concepts are: inheritance, association, polymorphism, etc.; database is the relational model, its key concepts are: tables, primary keys, for ...

  • Rails2.0.2 change the default DB adpter

    In Rails2.0.2 rails demo ... ... MissingSourceFile in SayController # hello no such file to load - sqlite3 RAILS_ROOT: / home / kenb / rails-projects / demo ... ... Checked config / database.yml, adpter default is set become the sqlite3. Check the ra ...

  • ROR resources

    Ruby Web site resources: ruby official website: ruby doc official website: rubyonrails official website: programming ruby online edition (Ruby studying the "Bible") ...

  • js page Jump implementation of a number of ways

    The first is: <script language="javascript" type="text/javascript"> window.location.href = "login.jsp? backurl =" + window.location.href; </ script> The second: <script language="javascript"> alert

  • RoR explained

    ROR is Ruby on Rails. Ruby is a well-known has been very good dynamic language It's dynamic language. Simple and easy. Dynamic languages are interpreted, but the performance may make a discount, but not absolute, because the application is complex, th

  • Some interview questions java

    The first is the company give you a chance to meet, it is necessary to know to meet from time to equal the interview, and have a lot of companies to see you at the first time will give you a ready point of doing something trivial, these questions, althoug

  • hibernate using c3p0 connection pooling

    Private c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters

    Hibernate in the configuration file: <properties> <property name="" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • In the servlet use Bean

    According to Sun's definition, JavaBean is a reusable software components. In fact JavaBean is a Java class, through the package into a property and methods of treatment of a function or a business object, referred to as bean. Because JavaBean is ...

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

blog comments powered by Disqus
Recent Entries
Tag Cloud
Random Entries