關於CKEditor的使用，網路上有無數的文章，這裡不再贅述。而關於java支援的檔案上傳功能，網路上同樣有千千萬萬的文章，但是遍歷十幾二十篇就會發現，千篇一律的抄襲，各種爬蟲程式帶來的網際網路資訊垃圾給我們的資訊獲取帶來很大的障礙。那些使用java開發CKEditor上傳和檔案瀏覽功能，千篇一律的使用的是Servlet的方式，傳統的JSP下的模式，不管現在框架已經發展到何種境界，都是一樣的照搬，抄襲，讓人很無奈，其實這是一個很簡單的功能，就是獲取請求，上傳檔案，返回結果而已。

通常我們的專案會使用springMVC或者struts或者其他框架，來作為C的部分，說白了，也就是控制請求和執行流程。而如果我們在採用了spring或者struts 的系統中，還是去使用servlet配置urlmapping來攔截檔案上傳請求，那豈不是讓人很彆扭，那些copy文章的人，怎麼就不去考慮考慮呢？

言歸正傳，ckeditor預設的圖片插入，是不帶“瀏覽圖片”和“上傳”標籤的，所以需要手動配置一下，開啟這個功能，而主要的貓膩，也就是這個配置的地方：

// 圖片上傳配置 config.filebrowserUploadUrl = 'upload.do?type=File'; config.filebrowserImageUploadUrl = 'upload.do?type=Image'; config.filebrowserFlashUploadUrl = 'upload.do?type=Flash'; // 圖片瀏覽配置 config.filebrowserImageBrowseUrl = 'browerServer.do?type=image';

上面我們配置了路徑，由於ckeditor並沒有支援java的外掛，所以這裡也是需要我們自己開發的內容。上面的上傳和瀏覽圖片的請求，我們定義了自己的url，也就是上述.do結尾的部分，我的測試工程中使用的是springMVC，利用的是2.5以後的註解功能。

好了，這裡配置了，那麼作用是什麼呢？開啟ckeditor：

可以看到，上述多出了上傳和瀏覽的功能，現在點選是沒用的，因為我們還沒開發具體的實現嘛

那麼那些配置出了多出了這兩個地方，還有什麼作用呢？用firefox看看其上傳部分的程式碼，可以很明顯直到那個配置的url到底是什麼用途了

其實就是一個上傳form，那個action的url就是我們配置的而已，所以這裡只要開發攔截這個請求並上傳檔案的功能就可以了嘛，多簡單的事兒。

寫程式碼前，看看我們的現狀吧，我們可能會讓這個圖片上傳到圖片伺服器去，但是呢，兜裡尚未有足夠的銀子，而且這個圖片暫時量不大，所以現階段還是儲存在應用的特定位置中，夠無奈的吧，沒辦法，誰讓咱麼有特定的圖片伺服器呢，那麼就下辦法在本應用下作文章吧。我們採用一個upload/img的目錄，來儲存圖片檔案，以後要遷移到圖片伺服器也方便些。

但是問題來了，所有的圖片都放到這個資料夾下，豈不是很龐大，而且一旦超過1000張，檔案搜尋速度是有點折磨的，那就咱想想辦法吧，那就再建立一級目錄，每一級下面最多放500張，如果當前資料夾下超過了500張，就重新建立一個資料夾，放入其中。這樣目錄就變成了三級的 upload/img/20100824 我們採用時間字串來命名。

那就看看程式碼吧：

package com.normandy.position.web; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Iterator; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.apache.commons.lang.StringUtils; import org.apache.commons.lang.time.DateUtils; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; /** * 上傳圖片 * <p> * 為CKEDITOR定製的圖片上傳功能，後續可以擴充套件上傳其他格式的檔案 * 上傳的檔案的基礎路徑為: ${apache.home}/${project.name}/${project.name}/freemarker/upload/img/${'yyyyMMdd'}/ * 每個資料夾下最多500個檔案 * </p> * @author mikko * */ @Controller @RequestMapping("/upload.do") public class FileUploadController { protected final Logger logger = Logger .getLogger(FileUploadController.class); /** ~~~ 上傳檔案的儲存路徑 */ private static final String FILE_UPLOAD_DIR = "/upload"; /** ~~~ 上傳檔案的儲存的下一級路徑，標示儲存型別 */ private static final String FILE_UPLOAD_SUB_IMG_DIR = "/img"; /** ~~~ 為了能讓CKEDITOR載入到上傳的圖片，此處將位置限制在了freemarker下*/ private static final String FOR_FREEMARKER_LOAD_DIR = "/freemarker"; /** ~~~ 每個上傳子目錄儲存的檔案的最大數目 */ private static final int MAX_NUM_PER_UPLOAD_SUB_DIR = 500; /** ~~~ 上傳檔案的最大檔案大小 */ private static final long MAX_FILE_SIZE = 1024 * 1024 * 2; /** ~~~ 系統預設建立和使用的以時間字串作為檔名稱的時間格式*/ private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMdd"; /** ~~~ 這裡擴充一下格式，防止手動建立的不統一*/ private static final String DEFAULT_SUB_FOLDER_FORMAT_NO_AUTO = "yyyy-MM-dd"; @RequestMapping(method = RequestMethod.GET) public void processUpload(ModelMap modelMap, HttpServletRequest request, HttpServletResponse response) { processUploadPost(modelMap, request, response); return; } @RequestMapping(method = RequestMethod.POST) public void processUploadPost(ModelMap modelMap, HttpServletRequest request, HttpServletResponse response) { // 判斷提交的請求是否包含檔案 boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (!isMultipart) { return; } // 獲取目錄 File floder = buildFolder(request); if (null == floder) { return; } try { response.setContentType("text/html; charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); // 上傳檔案的返回地址 String fileUrl = ""; FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload servletFileUpload = new ServletFileUpload(factory); servletFileUpload.setFileSizeMax(MAX_FILE_SIZE); @SuppressWarnings("unchecked") List<FileItem> fileitem = servletFileUpload.parseRequest(request); if (null == fileitem || 0 == fileitem.size()) { return; } Iterator<FileItem> fileitemIndex = fileitem.iterator(); if (fileitemIndex.hasNext()) { FileItem file = fileitemIndex.next(); if (file.isFormField()) { logger.error("上傳檔案非法！isFormField=true"); } String fileClientName = getFileName(file.getName()); String fileFix = StringUtils.substring(fileClientName, fileClientName.lastIndexOf(".") + 1); if (!StringUtils.equalsIgnoreCase(fileFix, "jpg") && !StringUtils.equalsIgnoreCase(fileFix, "jpeg") && !StringUtils.equalsIgnoreCase(fileFix, "bmp") && !StringUtils.equalsIgnoreCase(fileFix, "gif") && !StringUtils.equalsIgnoreCase(fileFix, "png")) { logger.error("上傳檔案的格式錯誤=" + fileFix); return; } if (logger.isInfoEnabled()) { logger.info("開始上傳檔案:" + file.getName()); } // 為了客戶端已經設定好了圖片名稱在伺服器繼續能夠明確識別，這裡不改名稱 File newfile = new File(floder, fileClientName); file.write(newfile); if (logger.isInfoEnabled()) { logger.info("上傳檔案結束，新名稱:" + fileClientName + ".floder:" + newfile.getPath()); } // 組裝返回url，以便於ckeditor定點陣圖片 fileUrl = FOR_FREEMARKER_LOAD_DIR + FILE_UPLOAD_DIR + FILE_UPLOAD_SUB_IMG_DIR + File.separator+floder.getName()+ File.separator + newfile.getName(); fileUrl = fileUrl.substring(1);// 去掉/freemarker的第一個/，否則ckeditor不識別 fileUrl = StringUtils.replace(fileUrl, "//", "/"); // 將上傳的圖片的url返回給ckeditor String callback = request.getParameter("CKEditorFuncNum"); out.println("<mce:script type=/"text/javascript/"><!-- "); out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + fileUrl + "',''" + ")"); out.println(" // --></mce:script>"); } out.flush(); out.close(); } catch (IOException e) { logger.error("上傳檔案發生異常！", e); } catch (FileUploadException e) { logger.error("上傳檔案發生異常！", e); } catch (Exception e) { logger.error("上傳檔案發生異常！", e); } return; } /** * 獲取檔名稱 * @param str * @return */ private String getFileName(String str){ int index = str.lastIndexOf("//"); if(-1 != index){ return str.substring(index); } else { return str; } } /** * 建立目錄 * * @return */ private File buildFolder(HttpServletRequest request) { // 這裡照顧一下CKEDITOR，由於ftl放置位置的原因，這裡必須要在freemarker目錄下才能被載入到圖片，否則雖然可以正常上傳和使用，但是 // 在控制元件中無法正常操作 String realPath = request.getSession().getServletContext() .getRealPath(FOR_FREEMARKER_LOAD_DIR); logger.error(realPath); // 一級目錄，如果不存在，建立 File firstFolder = new File(realPath + FILE_UPLOAD_DIR); if (!firstFolder.exists()) { if (!firstFolder.mkdir()) { return null; } } // 二級目錄，如果不存在，建立 String folderdir = realPath + FILE_UPLOAD_DIR + FILE_UPLOAD_SUB_IMG_DIR; if (logger.isDebugEnabled()) { logger.debug("folderdir" + folderdir); } if (StringUtils.isBlank(folderdir)) { logger.error("路徑錯誤:" + folderdir); return null; } File floder = new File(folderdir); if (!floder.exists()) { if (!floder.mkdir()) { logger.error("建立資料夾出錯！path=" + folderdir); return null; } } // 再往下的資料夾都是以時間字串來命名的，所以獲取最新時間的資料夾即可 String[] files = floder.list(); if (null != files && 0 < files.length) { // 含有子資料夾，則獲取最新的一個 Date oldDate = null; int index = -1; for (int i = 0; i < files.length; i++) { String fileName = files[i]; try { Date thisDate = DateUtils.parseDate(fileName, new String[] { DEFAULT_SUB_FOLDER_FORMAT_AUTO, DEFAULT_SUB_FOLDER_FORMAT_NO_AUTO }); if (oldDate == null) { oldDate = thisDate; index = i; } else { if (thisDate.after(oldDate)) { // 儲存最新的時間和陣列中的下標 oldDate = thisDate; index = i; } } } catch (ParseException e) { // 這裡異常吃掉，不用做什麼，如果解析失敗，會建立新的資料夾，防止人為的建立資料夾導致的異常。 } }// for // 判斷當前最新的資料夾下是否已經存在了最大數目的圖片 if (null != oldDate && -1 != index) { File pointfloder = new File(folderdir + File.separator + files[index]); if (!pointfloder.exists()) { if (!pointfloder.mkdir()) { logger.error("建立資料夾出錯！path=" + folderdir); return null; } } // 如果資料夾下的檔案超過了最大值，那麼也需要新建一個資料夾 String[] pointfloderFiles = pointfloder.list(); if (null != pointfloderFiles && MAX_NUM_PER_UPLOAD_SUB_DIR < pointfloderFiles.length) { return buildNewFile(folderdir); } return pointfloder; } // 查詢當前子資料夾失敗，新建一個 return buildNewFile(folderdir); } else { // 不含有子資料夾，新建一個，通常系統首次上傳會有這個情況 return buildNewFile(folderdir); } } /** * 建立一個新檔案 * @param path * @return */ private File buildNewFile(String path){ // 不含有子資料夾，新建一個，通常系統首次上傳會有這個情況 File newFile = buildFileBySysTime(path); if (null == newFile) { logger.error("建立資料夾失敗！newFile=" + newFile); } return newFile; } /** * 根據當前的時間建立資料夾，時間格式yyyyMMdd * * @param path * @return */ private File buildFileBySysTime(String path) { DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO); String fileName = df.format(new Date()); File file = new File(path + File.separator + fileName); if (!file.mkdir()) { return null; } return file; } }

這裡我用的是註解@Controller的方式，如果你用的是struts，那就去配置一個action吧，都是很簡單的事兒……

再囉嗦點別的，這裡如果使用這樣的方式開發完成以後，在eclipse裡直接去run in server，你會發現上傳沒報錯，但是返回的url根本不顯示圖片嘛，怎麼回事兒?

是這樣子的，在eclipse下有一個server的顯示框，雙擊你建立的server，可以配置server的啟動路徑等內容，其中有一個需要我們特別關注的選項：

將來專案釋出的時候，如果你直接將專案拷貝到tomcat裡，也沒啥子問題，但是測試階段更為方便的，是在這裡更改下部署路徑等，讓我們的上傳功能跟上線之後一樣生效。

上述的上傳日誌，會打印出：

D:/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp2/wtpwebapps/NormandyPosition/freemarker/upload/img/20100824/logo.jpg

對比下上圖的內容，是不是你也明白了是怎麼回事兒了，上述的其實是一個臨時的目錄，所以這裡我們要更改一下：

把server path改成你的apache的安裝目錄，你可以直接選擇第二個單選按鈕

把deploy path改成你的專案名稱

這樣改完之後呢：

搞定了~

下篇咱想想怎麼去弄一個多級目錄的伺服器的圖片瀏覽功能