首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

使用ckeditor+struts2+freemaker的图片下传

2012-11-04 
使用ckeditor+struts2+freemaker的图片上传在网上阅读了很多同志的资料...加上自己进段时间要开发新闻模块

使用ckeditor+struts2+freemaker的图片上传

在网上阅读了很多同志的资料...加上自己进段时间要开发新闻模块..下面就贴出例子

使用ckeditor+struts2+freemaker的图片下传

首先这个例子是采用ckeditor和Struts2实现的图片上传

?

这里先要把必须的包添加进来

?

?

?

然后是写ckeditor的测试页: test.html

?

<!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=UTF-8"><script type="text/javascript" src="ckeditor/ckeditor.js"></script>    <link rel="stylesheet" type="text/css" href="ckeditor/contents.css"/><style type="text/css">  * {      font-family: "宋体";      font-size: 14px  }  </style>  <title>CKEditor Testing</title></head><body><form id="form1" name="form1" method="post" action="ck">     <table width="650" height="400" border="0" align="center">      <tr>                 <td><textarea cols="80" id="content" name="content"></textarea>         <script type="text/javascript">               CKEDITOR.replace('content',addUploadButton(this));             function addUploadButton(editor) {              CKEDITOR.on('dialogDefinition', function( ev ){              var dialogName = ev.data.name;              var dialogDefinition = ev.data.definition;              if ( dialogName == 'image' ){                  var infoTab = dialogDefinition.getContents( 'info' );                  infoTab.add({                      type : 'button',                      id : 'upload_image',                      align : 'center',                      label : '上传',                      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 = "uploadFiles.jsp";     //var imgUrl = window.open('uploadFiles.jsp','_blank');          var imgUrl = window.showModalDialog("uploadFiles.jsp");           alert(imgUrl);     //var urlObj = document.getElementById(theURLElementId);// urlObj.value = imgUrl;// urlObj.fireEvent("onchange");          }          </script></td>      </tr>      <tr>           <td><input type="submit" name="Submit" value="提交" />         <input type="reset" name="Reset" value="重置" /></td>      </tr>  </table>  </form>  </body></html>

?再写struts.xml文件:

?

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    "http://struts.apache.org/dtds/struts-2.0.dtd"><struts>  <!--   <constant name="struts.devMode" value="true" /> --> <package name="index"  extends="struts-default">               <action name="ck" >           <result name="success" type="freemarker">freemarker/ck.ftl</result>       </action>        <!--                  <action name ="fileUpload" class ="com.lee.action.MyUploadAction" >             <interceptor-ref name ="fileUploadStack" />             <result name ="success">/testStrutsView.jsp </result >        </action >       -->               <action name ="fileUpload" class ="com.lee.action.MyUploadAction2" >             <interceptor-ref name ="fileUploadStack" />             <result name ="success">uploadFiles.jsp </result >        </action >      </package>      </struts>

?

写Action类:

?

package com.lee.action;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.InputStream;import java.io.OutputStream;import java.util.Date;import javax.servlet.http.HttpServletRequest;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.Action;import com.opensymphony.xwork2.ActionSupport;public class MyUploadAction2 extends ActionSupport {    private static final long serialVersionUID = 572146812454l ;    private static final int BUFFER_SIZE = 16 * 1024 ;     private File myFile;private String contentType;    private String fileName;    private String imageFileName;    private String pagePath;        public String getPagePath() {return pagePath;}public void setPagePath(String pagePath) {this.pagePath = pagePath;}        public void setMyFileContentType(String contentType) {        this .contentType = contentType;   }        public void setMyFileFileName(String fileName) {        this .fileName = fileName;   }            public void setMyFile(File myFile) {        this .myFile = myFile;   }        public String getImageFileName() {        return imageFileName;   } public static void copy(File src,File dst) {try {            InputStream in = null ;            OutputStream out = null ;             try {                                in = new BufferedInputStream( new FileInputStream(src), BUFFER_SIZE);                out = new BufferedOutputStream( new FileOutputStream(dst), BUFFER_SIZE);                 byte [] buffer = new byte [BUFFER_SIZE];                 while (in.read(buffer) > 0 ) {                    out.write(buffer);                }             } finally {                 if ( null != in) {                    in.close();                }                  if ( null != out) {                    out.close();                }             }         } catch (Exception e) {            e.printStackTrace();        } } private static String getExtention(String fileName) {         int pos = fileName.lastIndexOf(".");         return fileName.substring(pos);    } public String execute() {imageFileName = "mypic_"+fileName;pagePath = "ckeditor/images/Image/"+ imageFileName;        File imageFile = new File(ServletActionContext.getServletContext().getRealPath( "/ckeditor/images/Image" ) + "/" + imageFileName);        copy(myFile, imageFile);return Action.SUCCESS;}}

?

上面的是图片的上传类:

?

下面是图片上传页面:

uploadFiles.jsp

?

<%@ page language="java" contentType="text/html; charset=GB18030"    pageEncoding="GB18030"%><%@ page import="java.text.*" %>    <%@ page import="java.util.*" %><%@page import="com.opensymphony.xwork2.ActionContext"%>  <%@ taglib prefix = "s" uri = "/struts-tags" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns ="http://www.w3.org/1999/xhtml" >   <head>       <%         String name = (String)request.getAttribute("imageFileName");         String pagename = (String)request.getAttribute("pagePath");         if(name != null){          System.out.println(name);          System.out.println(pagename);          out.println("上传成功");       }               %>   </head>   <body><form action="fileUpload" method="POST" name="pos" enctype="multipart/form-data" >      <table width="80%" border="1" cellspacing="0" cellpadding="0">           <tr> <s:file name="myFile"></s:file>           </tr>      </table>           <input type="submit" value="上传"></form><input type="text" id="name2"  width="90%" value="<%=pagename %>"></body><script type="text/javascript">    var nameid = document.getElementById("name2").value;    if(nameid!="null"){    alert("你传递的参数是: "+nameid);   window.returnValue=nameid;    }   </script>    </html> 

?

?

接着是写一个Action负责把FreeMaker的处理:

?

package com.lee.action;import com.lee.model.TextArea;import com.opensymphony.xwork2.Action;import com.opensymphony.xwork2.ActionSupport;public class CKAction extends ActionSupport {private String content;TextArea tx  = new TextArea();public TextArea getTx() {return tx;}public void setTx(TextArea tx) {this.tx = tx;}public String execute() {tx.setContent(this.getContent());return Action.SUCCESS;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}}
?

?

热点排行