平时没有注意
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版本为4.1.10
该实例解决了kindeditor编辑器与struts2"上传错误"的问题,能够直接运行!
修复kindeditor官方对集成了Struts2框架上传文件无法上传的问题!
这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...
kindeditor本地上传图片支持token字段,kindeditor本身图片上传并无token参数,本资源利用原生ajax改造上传代码。
这个编辑器相对于fckeditor来说相对比较好因为这个在于struts2整合的时候不用再去重写过滤文件了
kindEditor4.1版修改上传图片宽高(图片自适应)
vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传,避免用户到处寻找,解决了用户粘贴复制截图时候,图片变成base64,上传给后台的时候长度过于长,所以在粘贴的时候就上传给服务器,最后以形式显示在富...
kindeditor整合struts2 增加删除图片功能
NULL 博文链接:https://libudi.iteye.com/blog/477728
kindeditor在JSP页面Struts2框架下使用的demo,解决了在Struts2下上传服务器出错的问题,上传文件不存在的问题,解决了kindeditor与textarea文本域数据同步,带非空验证!
已经付费购买的图片批量上传工具,可以在Web页面一次批量上传多张图片,可以直接从word中拷贝然后粘贴上传,尤其对于word中的数学公式,可以自动转为图片上传到web服务器,非常方便。
jquery + kindEditor 单个图片上传,通过插件实现图片上传至文本编辑器中,并进行回显,展示图片。
优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘贴时自动上传网络图片,粘贴时自动上传截图,地图宽度可设置百分比显示...
editorId的属性最好是单个,不能形如bean.content,如果是这样的话,上传图片会出现问题 如果是从数据库获取内容,并在kindEditor里选中,在action中定义content属性,setContent(bean.getContent());这种方式 ...
由于2020-12-31以后谷歌浏览器不再支持Flash,所以开发了一个H5版的上传,只需要简单的替换文件即可。
对kindeditor富文本编辑器做了修改,使其适用于struts2框架 解决了javascript动态生成的textarea无法显示工具栏的问题. 内附使用说明,操作很简单的。
其中图片上传就是一个 所以就自己写了个Demo研究,现在总算没问题了 这个Demo希望对大家有帮助 另外需注意的是 上传文件夹(Upload)一定要在根目录 不然会报错: -- 行: 1103 ...
由于2020-12-31以后谷歌浏览器不再支持Flash,所以开发了一个H5版的上传,只需要简单的替换文件即可。 注意:如果使用kindeditor-all.js, 则需要将multiimage.js中的全部代码整体代替kindeditor-all.js中的对应部分...
兼顾新浪编辑器和kindeditor编辑的图片上传整合 测试地址:edit/edit/editor.php 上传类:upload_cgi/upload.php 在线演示地址:http://www.ykisp.com/pliuy/user/editor.php