首頁 > 開發者 > JSP

讓ＣＫＥＤＩＴＯＲ支援ＪＳＰ上傳

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

很早以前就想把CKEditor在JSP下的圖片上傳及瀏覽伺服器圖片的方法寫下來了，不過因為教學項目中要用到，擔心HEM直接套用，自己不去調查（我可是用心良苦啊），不能很好的鍛煉，一直沒寫出來，今天項目開始測試了，他們的功能也都基本可以結束了，我也可以發我的帖了。

寫這個的起因是在網上一仁兄的文章，抱怨說CKEditor不支援JSP了，感歎了許多，說支援ASP、PHP，就是不支援JSP，於是俺也在網上找了找JSP方面的資料，看來確實不支援了，不過人家也是有道理的，畢竟JSP上傳的圖片，不能簡單的用個JSP就隨便搞搞就O了。

關於CKEditor在JSP下上傳圖片的方法，網上有很多，大都是寫了一大堆JS代碼然後自己註冊一個事件，寫的太多，我沒怎麼看懂，不過有一位大俠寫的讓我看到了簡單寫法的曙光（不過遺憾的是，時間太長了，不知道大俠的URL了）。

言歸正傳，對於上傳CKEditor已經做好了，我們只要準備個功能，接收CKEditor提交過來的檔案就可以了，所以呢實現的思路是：

 

  1. 準備一下JSP上傳檔案的JAR包：commons-fileupload.jar和commons-io.jar
  2. 編寫一個JSP用於接收上傳的檔案（這裡除上傳圖片功能外，需調用一個核心JS語句）
  3. 編寫一個JSP用於瀏覽檔案（這裡除上傳圖片功能外，需調用一個核心JS語句）
  4. 修改CKEditor的config.js，將上傳檔案和瀏覽檔案的JSP配置進去

說明一下，之所以採用JSP沒有使用Servlet，那是因為JSP簡單啊，這樣可以降低CKEditor對項目的侵入性啊。下面看代碼啦：

用於接收上傳的檔案的JSP：Java代碼  
  1. <%@page import="java.io.File"%>   
  2. <%@page import="java.util.UUID"%>   
  3. <%@page import="org.apache.commons.fileupload.FileItem"%>   
  4. <%@page import="java.util.List"%>   
  5. <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>   
  6. <%@page import="org.apache.commons.fileupload.FileItemFactory"%>   
  7. <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>   
  8. <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>   
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  10. <html>   
  11. <head>   
  12. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">   
  13. <meta http-equiv="pragma" content="no-cache">   
  14. <meta http-equiv="cache-control" content="no-cache">   
  15. <meta http-equiv="expires" content="0">   
  16. <title>JSP上傳檔案</title>   
  17. </head>   
  18. <body>   
  19. <%   
  20. String path = request.getContextPath() + "/";   
  21. if(ServletFileUpload.isMultipartContent(request)){   
  22.     String type = "";   
  23.     if(request.getParameter("type") != null)//擷取檔案分類   
  24.         type = request.getParameter("type").toLowerCase() + "/";   
  25.     String callback = request.getParameter("CKEditorFuncNum");//擷取回調JS的函數Num   
  26.     FileItemFactory factory = new DiskFileItemFactory();   
  27.     ServletFileUpload servletFileUpload = new ServletFileUpload(factory);   
  28.     servletFileUpload.setHeaderEncoding("UTF-8");//解決檔案名稱亂碼的問題   
  29.     List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);   
  30.     for (FileItem item : fileItemsList) {   
  31.         if (!item.isFormField()) {   
  32.             String fileName = item.getName();   
  33.             fileName = "file" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));   
  34.             //定義檔案路徑，根據你的檔案夾結構，可能需要做修改   
  35.             String clientPath = "ckeditor/uploader/upload/" + type + fileName;   
  36.   
  37.             //儲存檔案到伺服器上   
  38.             File file = new File(request.getSession().getServletContext().getRealPath(clientPath));   
  39.             if (!file.getParentFile().exists()) {   
  40.                 file.getParentFile().mkdirs();   
  41.             }   
  42.             item.write(file);   
  43.   
  44.             //列印一段JS，調用parent頁面的CKEditor的函數，傳遞函數編號和上傳後檔案的路徑；這句很重要，成敗在此一句   
  45.             out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+path+clientPath+"')</script>");   
  46.             break;   
  47.         }   
  48.     }   
  49. }   
  50.  %>   
  51. </body>   
  52. </html>  
<%@page import="java.io.File"%><%@page import="java.util.UUID"%><%@page import="org.apache.commons.fileupload.FileItem"%><%@page import="java.util.List"%><%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%><%@page import="org.apache.commons.fileupload.FileItemFactory"%><%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%><%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>JSP上傳檔案</title></head><body><%String path = request.getContextPath() + "/";if(ServletFileUpload.isMultipartContent(request)){String type = "";if(request.getParameter("type") != null)//擷取檔案分類type = request.getParameter("type").toLowerCase() + "/";String callback = request.getParameter("CKEditorFuncNum");//擷取回調JS的函數NumFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(factory);servletFileUpload.setHeaderEncoding("UTF-8");//解決檔案名稱亂碼的問題List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);for (FileItem item : fileItemsList) {if (!item.isFormField()) {String fileName = item.getName();fileName = "file" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));//定義檔案路徑，根據你的檔案夾結構，可能需要做修改String clientPath = "ckeditor/uploader/upload/" + type + fileName;//儲存檔案到伺服器上File file = new File(request.getSession().getServletContext().getRealPath(clientPath));if (!file.getParentFile().exists()) {file.getParentFile().mkdirs();}item.write(file);//列印一段JS，調用parent頁面的CKEditor的函數，傳遞函數編號和上傳後檔案的路徑；這句很重要，成敗在此一句out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+path+clientPath+"')</script>");break;}}} %></body></html>
用於瀏覽檔案的JSP：Java代碼  
  1. <%@page import="java.io.File"%>   
  2. <%@ page language="java" contentType="text/html; charset=GB18030"  
  3.     pageEncoding="GB18030"%>   
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  5. <html>   
  6. <head>   
  7. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">   
  8. <meta http-equiv="pragma" content="no-cache">   
  9. <meta http-equiv="cache-control" content="no-cache">   
  10. <meta http-equiv="expires" content="0">   
  11. <title>圖片瀏覽</title>   
  12. <script type="text/javascript">   
  13. //這段函數是重點，不然不能和CKEditor互動了   
  14. function funCallback(funcNum,fileUrl){   
  15.     var parentWindow = ( window.parent == window ) ? window.opener : window.parent;   
  16.     parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);   
  17.     window.close();   
  18. }   
  19. </script>   
  20. </head>   
  21. <body>   
  22. <%   
  23.     String path = request.getContextPath() + "/";   
  24.     String type = "";   
  25.     if(request.getParameter("type") != null)//擷取檔案分類   
  26.         type = request.getParameter("type").toLowerCase() + "/";   
  27.     String clientPath = "ckeditor/uploader/upload/" + type;   
  28.     File root = new File(request.getSession().getServletContext().getRealPath(clientPath));   
  29.     if(!root.exists()){   
  30.         root.mkdirs();   
  31.     }   
  32.     String callback = request.getParameter("CKEditorFuncNum");   
  33.     File[] files = root.listFiles();   
  34.     if(files.length > 0){   
  35.         for(File file:files ) {   
  36.             String src = path + clientPath + file.getName();   
  37.             out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">");   
  38.         }   
  39.     }else{   
  40.         out.println("<h3>未檢測到資源。</h3>");   
  41.     }   
  42.  %>   
  43. </body>   
  44. </html>  
<%@page import="java.io.File"%><%@ page language="java" contentType="text/html; charset=GB18030"    pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>圖片瀏覽</title><script type="text/javascript">//這段函數是重點，不然不能和CKEditor互動了function funCallback(funcNum,fileUrl){var parentWindow = ( window.parent == window ) ? window.opener : window.parent;parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);window.close();}</script></head><body><%String path = request.getContextPath() + "/";String type = "";if(request.getParameter("type") != null)//擷取檔案分類type = request.getParameter("type").toLowerCase() + "/";String clientPath = "ckeditor/uploader/upload/" + type;File root = new File(request.getSession().getServletContext().getRealPath(clientPath));if(!root.exists()){root.mkdirs();}String callback = request.getParameter("CKEditorFuncNum");File[] files = root.listFiles();if(files.length > 0){for(File file:files ) {String src = path + clientPath + file.getName();out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">");}}else{out.println("<h3>未檢測到資源。</h3>");} %></body></html>
修改後的CKEditor的config.js： Js代碼  
  1. CKEDITOR.editorConfig = function( config )   
  2. {   
  3.     config.language = 'zh-cn';   
  4.     config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';   
  5.     config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';   
  6.     config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';   
  7.     config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';   
  8.     config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';   
  9.     config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';   
  10.     config.filebrowserWindowWidth = '640';   
  11.     config.filebrowserWindowHeight = '480';   
  12. }  
CKEDITOR.editorConfig = function( config ){config.language = 'zh-cn';config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';config.filebrowserWindowWidth = '640';config.filebrowserWindowHeight = '480';}

OK，修改完畢。簡單吧，其實上傳和瀏覽檔案很簡單（上面只是一個示範，代碼僅供參考），要點是要調用一下CKEDITOR.tools.callFunction方法。

附件打包了一個可啟動並執行Eclipse工程，供需要的朋友參考。

---------------------------------------------------------------------------------------

圖片預覽：

檔案夾結構

上傳效果：


 
 

  • 大小: 17 KB
  • ckediter.rar (832.7 KB)

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
動態網頁製作技術JSP頁面顯示亂碼問題的解決
servlet、jsp跳轉(傳值)總結及URL傳參數__js
Spring Boot 最佳實務（二）整合Jsp與生產環境部署
JSP頁面列印
用JSP實現資料庫圖片的儲存與顯示執行個體
用jsp上傳圖片檔案，存貯到欄位類型為blob的流形式代碼

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More