ckeditor 實現圖片上傳以及預覽（親測有效）

引用ckeditor

<script type="text/javascript" src="static/ckeditor/ckeditor.js"></script>

<textarea name="cktest"></textarea>
<script type="text/javascript">
    CKEDITOR.replace("cktest");
</script>

刪除imag.js中的文本

將image.js中的hidden屬性值改為0(總之為false 就ok 了)

修改config.js屬性

CKEDITOR.editorConfig = function(config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.image_previewText = '';
    config.removeDialogTabs = 'image:advanced;image:Link';//隱藏超鏈接與高級選項
    config.filebrowserImageUploadUrl = "http://localhost:8888/moon-web/hello/upload";//上傳圖片的地址
};

編寫上傳的代碼（切記：不要用spring的上傳方式{用spring的配置方式會出現各種各樣的問題}）

@RequestMapping(value="/upload")
public void fileUpload(HttpServletRequest request, HttpServletResponse response) {
    String DirectoryName = "uploads";
    try {
        ImageUploadUtil.ckeditor(request, response, DirectoryName);
    } catch (IllegalStateException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

package com.sun.test.aircraft.ckImg;

import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

/**
 * @Author:sun
 * @version:
 * @Description:
 * @Date:Created in 10:34 2017/12/1
 */
public class ImageUploadUtil {
    // 圖片類型
    private static List<String> fileTypes = new ArrayList<String>();

    static {
        fileTypes.add(".jpg");
        fileTypes.add(".jpeg");
        fileTypes.add(".bmp");
        fileTypes.add(".gif");
        fileTypes.add(".png");
    }

    /**
     * 圖片上傳
     *
     */
    public static String upload(HttpServletRequest request, String DirectoryName) throws IllegalStateException,
            IOException {
        // 創建一個通用的多部分解析器
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession()
                .getServletContext());
        // 圖片名稱
        String fileName = null;
        // 判斷 request 是否有文件上傳,即多部分請求
        if (multipartResolver.isMultipart(request)) {
            // 轉換成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            // 取得request中的所有文件名
            Iterator<String> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                // 記錄上傳過程起始時的時間，用來計算上傳時間
                // int pre = (int) System.currentTimeMillis();
                // 取得上傳文件
                MultipartFile file = multiRequest.getFile(iter.next());
                if (file != null) {
                    // 取得當前上傳文件的文件名稱
                    String myFileName = file.getOriginalFilename();
                    // 如果名稱不為“”,說明該文件存在，否則說明該文件不存在
                    if (myFileName.trim() != "") {
                        // 獲得圖片的原始名稱
                        String originalFilename = file.getOriginalFilename();
                        // 獲得圖片后綴名稱,如果后綴不為圖片格式，則不上傳
                        String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
                        if (!fileTypes.contains(suffix)) {
                            continue;
                        }
                        // 獲得上傳路徑的絕對路徑地址(/upload)-->
                        String realPath = request.getSession().getServletContext().getRealPath("/" + DirectoryName);
                        System.out.println(realPath);
                        // 如果路徑不存在，則創建該路徑
                        File realPathDirectory = new File(realPath);
                        if (realPathDirectory == null || !realPathDirectory.exists()) {
                            realPathDirectory.mkdirs();
                        }
                        // 重命名上傳后的文件名 111112323.jpg
                        fileName = Math.random() + suffix;
                        // 定義上傳路徑 .../upload/111112323.jpg
                        File uploadFile = new File(realPathDirectory + "\\" + fileName);
                        System.out.println(uploadFile);
                        file.transferTo(uploadFile);
                    }
                }
                // 記錄上傳該文件后的時間
                // int finaltime = (int) System.currentTimeMillis();
                // System.out.println(finaltime - pre);
            }
        }
        return fileName;
    }

    /**
     * ckeditor文件上傳功能，回調，傳回圖片路徑，實現預覽效果。
     *
     * @Title ckeditor
     * @param request
     * @param response
     * @param DirectoryName
     *            文件上傳目錄：比如upload(無需帶前面的/) upload/..
     * @throws IOException
     */
    public static void ckeditor(HttpServletRequest request, HttpServletResponse response, String DirectoryName)
            throws IOException {
        String fileName = upload(request, DirectoryName);
        // 結合ckeditor功能
        // imageContextPath為圖片在服務器地址，如upload/123.jpg,非絕對路徑
        String imageContextPath = request.getContextPath() + "/" + DirectoryName + "/" + fileName;
        response.setContentType("text/html;charset=UTF-8");
        String callback = request.getParameter("CKEditorFuncNum");
        PrintWriter out = response.getWriter();
        out.println("<script type=\"text/javascript\">");
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + imageContextPath + "',''" + ")");
        out.println("</script>");
        out.flush();
        out.close();
    }
}