平时没有注意
html编辑器上传图片的问题,这次做了个小项目,突然发现了。
html编辑器上传图片的问题,这次做了个小项目,突然发现了。
Strut2 结合kindeditor时出现图片不能上传的问题。
先是在网上找了很多办法,还是先回顾一下流程吧。呵呵
1. 换编辑器
先是sinaeditor 这个编辑器简单,可是默认只有asp版本的,后来在csdn上找了一个jsp版本的,还是不能上传图片,同时的错误。
再换,弄一个很大的编辑器FCKeditor ,在他的官方网站上下了java版本的,与struts2整合的时候,发现同样的错误,不能上传图片。
2. 三个编辑器的用过了,错误是同样的,不能上传图片。再搜索过程中发现,kindeditor一个中文版的论坛,下定决心用kindeditor。网址是:http://www.kindsoft.net/,有基论坛上有这样一篇文章http://www.kindsoft.net/view.php?bbsid=5&postid=656&pagenum=29 发现图片上传是通过一个iframe来实现无刷新的文件上传,再图片上传后返回的是json格式的信息,并通过ajax获得这些信息。
于是想出了如下解决办法:
1、利用struts2 原始的方法实现图片上传
2、在上传图片后,在action中利用PrintWriter打印json格式的数据。
代码如下:
1、demo.jsp
2.EditImageAdd.java
//*******************************************************************//
//
//** 创建人: 何岳军
//
//** 日 期: 2010-02-18
//
//** 描 述: 编辑器图片上传
//
//** 版 本:
//
//*******************************************************************//
package eshop.action.admin;
import java.util.*;
import java.io.*;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.json.simple.JSONObject;
import com.opensymphony.xwork2.*;
import eshop.*;
import com.dao.*;
public class EditImageAdd extends ActionSupport {
private String id;
private String imgTitle;
private String imgWidth;
private String imgHeight;
private String imgBorder;
private List<File> imgFile; //文件
private List<String>imgFileFileName; //文件名
private List<String> imgFileContentType; //文件路径
private String fileurl;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getImgTitle() {
return imgTitle;
}
public void setImgTitle(String imgTitle) {
this.imgTitle = imgTitle;
}
public String getImgWidth() {
return imgWidth;
}
public void setImgWidth(String imgWidth) {
this.imgWidth = imgWidth;
}
public String getImgHeight() {
return imgHeight;
}
public void setImgHeight(String imgHeight) {
this.imgHeight = imgHeight;
}
public String getImgBorder() {
return imgBorder;
}
public void setImgBorder(String imgBorder) {
this.imgBorder = imgBorder;
}
public List<File> getImgFile() {
return imgFile;
}
public void setImgFile(List<File> imgFile) {
this.imgFile = imgFile;
}
public List<String> getImgFileFileName() {
return imgFileFileName;
}
public void setImgFileFileName(List<String> imgFileFileName) {
this.imgFileFileName = imgFileFileName;
}
public List<String> getImgFileContentType() {
return imgFileContentType;
}
public void setImgFileContentType(List<String> imgFileContentType) {
this.imgFileContentType = imgFileContentType;
}
public String getFileurl() {
return fileurl;
}
public void setFileurl(String fileurl) {
this.fileurl = fileurl;
}
public String execute(){
try{
//上传图片
FileUpTool fileUpTool= new FileUpTool();
for(int i=0;i<imgFile.size();i++){
if(fileUpTool.saveFile(imgFile.get(i), imgFileFileName.get(i),"attached")>0){
this.fileurl=fileUpTool.getFileurl();
String root = ServletActionContext.getRequest().getRealPath("attached");
root+="\\";
String temp = "parent.KE.plugin[\"image\"].insert(\'"+id+"','/sansui/attached/"+this.fileurl+"','"+imgTitle+"','"+imgWidth+"','"+imgHeight+"','"+imgBorder+"');";
StringBuffer sb = new StringBuffer();
sb.append("<html>");
sb.append("<head>");
sb.append("<title>Insert Image</title>");
sb.append("<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">");
sb.append("</head>");
sb.append("<body>");
sb.append("<script type=\"text/javascript\">"+temp+";</script>");
sb.append("</body>");
sb.append("</html>");
String out = sb.toString();
try {
PrintWriter pw = null;
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=gb2312");
response.setHeader("Cache-Control","no-cache");
//输出ajax内容
response.setHeader("Content-Type", "text/html;charset=gb2312");
response.getWriter().write(out );
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
return null;
}catch(Exception e){
e.printStackTrace();
return null;
}
}
}
说明:其中的FileUpTool 是文件上传的功能类,很简单,就是一些方面的封装,自己实现一下。
3.struts.xml
<!-- 编辑器上图片上传 -->
<action name="adminEditImageAdd" class="eshop.action.admin.EditImageAdd">
<interceptor-ref name="fileUpload">
<param name="maximumSize">10485760</param><!-- maxinumSize: 10M -->
<param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg,image/GIF,image/JPG,image/pjpeg,image/x-png</param>
</interceptor-ref>
<interceptor-ref name="defaultStack"></interceptor-ref>
</action>
上传的问题解决了,但是新的问题双来了,就是插入文章中的图片不能删除,kindeditor还没有这个功能。这个也要自己来实现。汗 

- 大小: 49.4 KB
分享到:
相关推荐
在本文中,我们将详细探讨如何将KindEditor与Struts2整合,实现图片上传功能,并使用Bootstrap来优化页面展示。 首先,我们需要下载KindEditor的中文版本,如提供的`kindeditor-4.1.10-zh-CN.zip`文件。解压后,...
Kindeditor-v4.0.6 Struts2修订版是一个针对KindEditor编辑器与Struts2框架集成时出现的文件上传问题进行修复的版本。在原版的KindEditor中,当它与Struts2框架整合时,可能会遇到上传功能无法正常工作的情况。这...
**Struts2版KindEditor详解** Struts2是一款流行的Java Web开发框架,它基于MVC设计模式,提供了强大的控制层支持。而KindEditor则是一款功能丰富的JavaScript富文本编辑器,常用于网页中的文本输入场景,如博客、...
这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...
在Struts2的配置文件(通常为struts.xml)中,定义一个Action类,处理图片上传和删除的操作。例如: ```xml <param name="contentType">image/jpeg <param name="inputName">fileInputStream ...
可以使用Spring MVC或者Struts2等框架来构建这个接口。文件通常被保存在服务器的特定目录下,然后返回一个访问该文件的URL给前端,前端接收到URL后,将其插入到编辑器的HTML内容中。 4. **安全性考虑**: - 文件名...
在Struts2应用中集成KindEditor,可以实现用户友好的内容编辑界面。首先,你需要在Web页面上引入KindEditor的JavaScript和CSS资源,然后配置Struts2的Action来接收并处理KindEditor提交的数据。例如,对于图片上传,...
Struts2框架与KindEditor-4.1.9在MyEclipse中的集成应用 Struts2作为一款流行的Java Web开发框架,它基于Model-View-Controller(MVC)设计模式,提供了一种组织应用程序结构和控制流程的方式。而KindEditor是一款...
总结,这个"kindeditor文本编辑器案例(java版+struts2源代码)"是一个很好的学习资源,可以帮助开发者快速理解和实现基于Java和Struts2的在线文本编辑功能。通过深入研究案例中的源代码,可以提升对前后端交互、文件...
KindEditor通过内置的图片上传插件,实现了这一功能。该功能通常由两部分组成:前端的上传界面和后端的处理逻辑。 前端部分,KindEditor的图片上传功能通常会有一个按钮或一个简单的文件选择器,用户可以通过点击...
这个项目是一个自建的简易威客(weike)平台,它采用SSH(Spring、Struts2、Hibernate)框架进行开发,并集成了KindEditor作为富文本编辑器。SSH框架是Java Web开发中常用的三大开源框架组合,它们各自负责不同的...
在Java环境中集成KindEditor,主要是为了实现用户在编辑器中插入图片、文档等文件的功能。 首先,了解KindEditor的工作原理。KindEditor通过AJAX方式将用户选择的文件上传到服务器,然后返回文件的URL,编辑器会将...
这里的`uploadJson`和`fileManagerJson`属性是配置上传图片或文件的处理路径,你需要在Struts2中定义相应的Action来处理这些请求。 在Struts2 Action中,我们需要接收并处理来自KindEditor的POST请求,包括富文本...
此外,对于Java开发者来说,KindEditor可以与Spring MVC、Struts2等框架无缝集成。在后端,可以使用Java来处理编辑器提交的富文本内容,进行HTML过滤、格式转换等操作,以保证数据的安全性和一致性。 总之,...
【Uploadify + Struts2 实现文件上传详解】 在Web开发中,文件上传是一个常见的功能需求,尤其是在内容管理系统、论坛或者其他需要用户提交图片、文档等资料的场景。Uploadify是一款基于jQuery的文件上传插件,它...
在实际开发中,可能还会遇到如编辑器与后端框架(如Spring、Struts等)的集成问题,以及如何处理图片和文件的访问权限等挑战。为了解决这些问题,开发者需要对JSP、Servlet和前端JavaScript有深入的理解,并灵活运用...
6. **KindEditor**:是一个开源的JavaScript富文本编辑器,提供了多种编辑功能,如字体、字号、颜色、图片上传等,用于网站后台的内容编辑。 7. **GroupUploader**:这是一款JavaScript多文件上传组件,允许用户一...
2. **山西通四方物流系统**(2015/2-2015/10):项目基于BS架构,利用Struts2、Hibernate、Spring、Junit、JQuery、JQuery easy ui、Ztree、POI、CXF和Apache Shiro等技术。他的角色包括: - 设计并实现收派标准、...
* 新世纪网上商城项目:了解电商系统的开发和实现,从后台商品图片上传到前台用户浏览、搜索和下单等操作 * 山西通四方物流系统项目:了解 BS 架构的自动化实现,了解系统管理、基础设置、受理、调度、中转配送流程...