Home > Developer > JSP

Allow ckeditor to support JSP upload

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A long time ago, I wanted to write down the methods for uploading ckeditor images in JSP and browsing server images. However, because it is necessary for teaching projects, I am worried that hem will be applied directly, I don't want to investigate it myself (but I am very careful). I can't do a good job of training and have never written it out. Today, the project started testing and their functions can basically be completed, I can also post my post.

The reason for writing this is my friend's post on the Internet. He complained that ckeditor does not support JSP. He lamented many times that JSP is not supported when ASP and PHP are supported, so I also looked for JSP information on the Internet, which does not seem to be supported, but people also make sense. After all, the images uploaded by JSP are, you can't simply use a JSP.

There are many ways for ckeditor to upload images under JSP, many of which are written in JavascriptCodeThen I registered an event myself and wrote too much. I didn't understand it. However, a man wrote something that showed me the dawn of simple writing. (unfortunately, it took too long, I do not know the URL of Hero ).

To put it bluntly, we have done a good job of uploading ckeditor. We only need to prepare a function to receive the files submitted by ckeditor. So the implementation idea is as follows:

 

    1. Prepare the jar package for JSP file upload: commons-fileupload.jar and commons-io.jar
    2. Compile a JSP to receive the uploaded file (in addition to the image upload function, you need to call a core JS Statement)
    3. Compile a JSP for viewing files (in addition to the image upload function, you need to call a core JS Statement)
    4. Modify the config. js of ckeditor and add the JSP configuration of the uploaded and browsed files.

Note that JSP is not used because JSP is simple, which can reduce ckeditor's project intrusion. See the code below:

JSP used to receive uploaded files: Java code
  2. <%@ Page Import="Java. Io. File"%>
  4. <%@ Page Import="Java. util. UUID"%>
  6. <%@ Page Import="Org. Apache. commons. fileupload. fileitem"%>
  8. <%@ Page Import="Java. util. List"%>
  10. <%@ Page Import="Org. Apache. commons. fileupload. disk. diskfileitemfactory"%>
  12. <%@ Page Import="Org. Apache. commons. fileupload. fileitemfactory"%>
  14. <%@ Page Import="Org. Apache. commons. fileupload. servlet. servletfileupload"%>
  16. <% @ Page Language ="Java"Contenttype ="Text/html; charset = gb18030"Pageencoding ="Gb18030"%>
  18. <! Doctype HTML public"-// W3C // dtd html 4.01 transitional // en" Http://www.w3.org/TR/html4/loose.dtd">
  20. <HTML>
  22. <Head>
  24. <Meta http-equiv ="Content-Type"Content ="Text/html; charset = gb18030">
  26. <Meta http-equiv ="Pragma"Content ="No-Cache">
  28. <Meta http-equiv ="Cache-control"Content ="No-Cache">
  30. <Meta http-equiv ="Expires"Content ="0">
  32. <Title> JSP file upload </title>
  34. </Head>
  36. <Body>
  38. <%
  40. String Path = request. getcontextpath () +"/";
  42. If(Servletfileupload. ismultipartcontent (request )){
  44. String type ="";
  46. If(Request. getparameter ("Type")! =Null)// Obtain the file category
  48. Type = request. getparameter ("Type"). Tolowercase () +"/";
  50. String callback = request. getparameter ("Ckeditorfuncnum");// Obtain the callback JS function num
  52. Fileitemfactory factory =NewDiskfileitemfactory ();
  54. Servletfileupload =NewServletfileupload (factory );
  56. Servletfileupload. setheaderencoding (UTF-8");// Solve the problem of garbled file names
  58. List <fileitem> fileitemslist = servletfileupload. parserequest (request );
  60. For(Fileitem item: fileitemslist ){
  62. If(! Item. isformfield ()){
  64. String filename = item. getname ();
  66. Filename ="File"+ System. currenttimemillis () + filename. substring (filename. lastindexof ("."));
  68. // Define the file path, which may need to be modified based on your folder structure
  70. String clientpath ="Ckeditor/Uploader/upload /"+ Type + filename;
  74. // Save the file to the server
  76. File file =NewFile (request. getsession (). getservletcontext (). getrealpath (clientpath ));
  78. If(! File. getparentfile (). exists ()){
  80. File. getparentfile (). mkdirs ();
  82. }
  84. Item. Write (File );
  88. // Print a piece of JS Code, call the ckeditor function on the parent page, and pass the function number and the path of the uploaded file. This sentence is very important.
  90. Out. println ("<SCRIPT type = 'text/JavaScript '> window. Parent. ckeditor. Tools. callfunction ("+ Callback +",'"+ Path + clientpath +"') </SCRIPT>");
  92. Break;
  94. }
  96. }
  98. }
  100. %>
  102. </Body>
  104. </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> 
JSP used to browse files: Java code

 
    
 
  
  1.  
    2. 
  
  2. <%@ Page Import="Java. Io. File"%>
    3.  
 
  
  3.  
    4. 
  
  4. <% @ Page Language ="Java"Contenttype ="Text/html; charset = gb18030"
    5.  
 
  
  5.  
    6. 
  
  6. Pageencoding ="Gb18030"%>
    7.  
 
  
  7.  
    8. 
  
  8. <! Doctype HTML public"-// W3C // dtd html 4.01 transitional // en" Http://www.w3.org/TR/html4/loose.dtd">
    9.  
 
  
  9.  
    10. 
  
  10. <HTML>
    11.  
 
  
  11. 
  
  12. <Head>
    13.  
 
  
  13.  
    14. 
  
  14. <Meta http-equiv ="Content-Type"Content ="Text/html; charset = gb18030">
    15.  
 
  
  15.  
    16. 
  
  16. <Meta http-equiv ="Pragma"Content ="No-Cache">
    17.  
 
  
  17.  
    18. 
  
  18. <Meta http-equiv ="Cache-control"Content ="No-Cache">
    19.  
 
  
  19.  
    20. 
  
  20. <Meta http-equiv ="Expires"Content ="0">
    21.  
 
  
  21.  
    22. 
  
  22. <Title> Image Browsing </title>
    23.  
 
  
  23. 
  
  24. <SCRIPT type ="Text/JavaScript">
    25.  
 
  
  25.  
    26. 
  
  26. // This function is important. Otherwise, you cannot interact with ckeditor.
    27.  
 
  
  27.  
    28. 
  
  28. Function funcallback (funcnum, fileurl ){
    29.  
 
  
  29.  
    30. 
  
  30. VaR parentwindow = (window. Parent = Window )? Window. opener: window. parent;
    31.  
 
  
  31.  
    32. 
  
  32. Parentwindow. ckeditor. Tools. callfunction (funcnum, fileurl );
    33.  
 
  
  33.  
    34. 
  
  34. Window. Close ();
    35.  
 
  
  35.  
    36. 
  
  36. }
    37.  
 
  
  37.  
    38. 
  
  38. </SCRIPT>
    39.  
 
  
  39.  
    40. 
  
  40. </Head>
    41.  
 
  
  41. 
  
  42. <Body>
    43.  
 
  
  43.  
    44. 
  
  44. <%
    45.  
 
  
  45.  
    46. 
  
  46. String Path = request. getcontextpath () +"/";
    47.  
 
  
  47.  
    48. 
  
  48. String type ="";
    49.  
 
  
  49.  
    50. 
  
  50. If(Request. getparameter ("Type")! =Null)// Obtain the file category
    51.  
 
  
  51.  
    52. 
  
  52. Type = request. getparameter ("Type"). Tolowercase () +"/";
    53.  
 
  
  53. 
  
  54. String clientpath ="Ckeditor/Uploader/upload /"+ Type;
    55.  
 
  
  55.  
    56. 
  
  56. File root =NewFile (request. getsession (). getservletcontext (). getrealpath (clientpath ));
    57.  
 
  
  57.  
    58. 
  
  58. If(! Root. exists ()){
    59.  
 
  
  59.  
    60. 
  
  60. Root. mkdirs ();
    61.  
 
  
  61.  
    62. 
  
  62. }
    63.  
 
  
  63.  
    64. 
  
  64. String callback = request. getparameter ("Ckeditorfuncnum");
    65.  
 
  
  65. 
  
  66. File [] files = root. listfiles ();
    67.  
 
  
  67.  
    68. 
  
  68. If(Files. length>0){
    69.  
 
  
  69.  
    70. 
  
  70. For(File file: Files ){
    71.  
 
  
  71.  
    72. 
  
  72. String src = path + clientpath + file. getname ();
    73.  
 
  
  73. 
  
  74. Out. println ("+ SRC +"'Alt = '"+ File. getname () +"'Onclick = \" funcallback ("+ Callback +",'"+ SRC +"') \">");
    75.  
 
  
  75.  
    76. 
  
  76. }
    77.  
 
  
  77.  
    78. 
  
  78. }Else{
    79.  
 
  
  79.  
    80. 
  
  80. Out. println ("<H3> no resource is detected. </H3>");
    81.  
 
  
  81. 
  
  82. }
    83.  
 
  
  83.  
    84. 
  
  84. %>
    85.  
 
  
  85.  
    86. 
  
  86. </Body>
    87.  
 
  
  87.  
    88. 
  
  88. </Html>
    89.  

 


<% @ 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> 
The modified ckeditor config. JS: JS Code

  
    
 
   
  1.  
    2. 
   
  2. Ckeditor. editorconfig =Function(Config)
    3.  
 
   
  3.  
    4. 
   
  4. {
    5.  
 
   
  5.  
    6. 
   
  6. Config. Language ='Zh-cn';
    7.  
 
   
  7.  
    8. 
   
  8. Config. filebrowserbrowseurl ='Ckeditor/Uploader/browse. jput';
    9.  
 
   
  9.  
    10. 
   
  10. Config. filebrowserimagebrowseurl ='Ckeditor/Uploader/browse. jsp? Type = images';
    11.  
 
   
  11. 
   
  12. Config. filebrowserflashbrowseurl ='Ckeditor/Uploader/browse. jsp? Type = flashs';
    13.  
 
   
  13.  
    14. 
   
  14. Config. filebrowseruploadurl ='Ckeditor/Uploader/upload. jput';
    15.  
 
   
  15.  
    16. 
   
  16. Config. filebrowserimageuploadurl ='Ckeditor/Uploader/upload. jsp? Type = images';
    17.  
 
   
  17.  
    18. 
   
  18. Config. filebrowserflashuploadurl ='Ckeditor/Uploader/upload. jsp? Type = flashs';
    19.  
 
   
  19.  
    20. 
   
  20. Config. filebrowser1_wwidth ='123';
    21.  
 
   
  21. 
   
  22. Config. filebrowserwindowheight ='123';
    23.  
 
   
  23.  
    24. 
   
  24. }
    25.  

  


 
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. filebrowser1_wwidth = '000000'; config. filebrowser1_wheight = '000000 ';}
 


OK. The modification is complete. It's easy to upload and browse files (the above is just a demonstration and the code is for reference only). The main point is to callCkeditor. Tools. callfunctionMethod.
 


 
The attachment is packaged with a runable Eclipse project for your reference.
 


 
Bytes ---------------------------------------------------------------------------------------
 


 
Image preview:
 


 
Folder structure
 


 
 


 
Upload effect:
 


 

 
 
 


  
     
 
   
       
    
    •  
    
    • Size: 17 KB
      •  
   
     

  


  
     
 
   
       
    
    • Ckediter.rar (832.7 KB)
      •  
   
     

  


 
 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
allow to upload to onedrive how to allow users to upload files to website convert php to jsp registration form with image upload in jsp jsp file convert to pdf htaccess to allow directory listing how to host jsp website for free
Related Article
Set the html/jsp edit automatic prompt in MyEclipse 9/10 __html
JSP (6)--JSP declaration
Springboot load JSP refresh JSP, refresh controller (try it Y...
Javax.servlet.jsp.PageContext cannot is resolved to a type
A simple calculator for JSP exercises (using Jsp+javabean mode)
Use absolute path $ {pagecontext. Request. contextpath} in JSP}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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