这段时间在搞一个小网站的项目，其中有个功能是可以网页上编辑文字和图片，能一起上传到数据库然后在页面上展现，当然还可以上传附件，不过我现在还没弄好，先把上传图片的功能记录一下。
说到这个wangeditor3富文本编辑器，只能说自己才疏学浅被搞得头晕，花了将近三四天才弄好这个简单的上传图片功能= = 主要原因在于还不清楚普通上传图片的具体步骤，直接着手使用富文本编辑器来实现功能，而且这个wangeditor还以轻量级为特点，其文档就没有那么仔细，出现问题的时候我看网上也没有太多的方法可寻，所以在此写下这篇短叙以供自己和网友参考及回忆。话不多说，上代码。
jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>wangEditor demo</title></head><body><form id="newspost" method="post" action="newspost" namespace="/" enctype="multipart/form-data"><input type="hidden" id="content" name="content"/><div style="padding: 5px 0; color: #ccc"></div><div id="editor"></div><br><input type="button" value="保存" onclick="subm()"></input></form><!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！--><script type="text/javascript" src="${pageContext.request.contextPath }/wangEditor.min.js"></script><script type="text/javascript">function subm(){var title = document.getElementById('title').value;document.getElementById('content').value=editor.txt.html();document.getElementById('newspost').submit(); }</script><script type="text/javascript">var E = window.wangEditorvar editor = new E('#editor')editor.customConfig.showLinkImg = false // 隐藏“网络图片”tab editor.customConfig.uploadFileName = 'yourFileName'//给上传的本地图片文件命名的统一名称 editor.customConfig.uploadImgServer = '/News/picload.action'//官方文档上写的是服务器地址，也就是上传图片的方法名editor.customConfig.debug = trueeditor.create() </script></body></html>
上传图片方法：（参考的方法是wangeditor2文档里的一种）
public void picload() throws Exception{HttpServletRequest request = ServletActionContext.getRequest();HttpServletResponse response = ServletActionContext.getResponse();//创建上传图片存放的文件夹String path = request.getServletContext().getRealPath("/image");File file = new File(path);if (!file.exists())file.mkdirs();String fileName = "";// 文件名称/**上传文件处理内容**/DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload sfu = new ServletFileUpload(factory);sfu.setHeaderEncoding("UTF-8"); // 处理中文问题sfu.setSizeMax(1024 * 1024); // 限制文件大小try {List<FileItem> fileItems = sfu.parseRequest(request); // 解码请求System.out.println(fileItems);for (FileItem fi : fileItems) {fileName = UUID.randomUUID()+fi.getName().substring(fi.getName().lastIndexOf("."),fi.getName().length());fi.write(new File(path, fileName));}} catch (Exception e) {e.printStackTrace();}//获取图片url地址System.out.println("fileName:"+fileName);String imgUrl = "http://localhost:8080/News/image/" + fileName;System.out.println("imgUrl:"+imgUrl); //这里的data数据形式必须如此，返回的url地址才能匹配上wangeditor3的源程序要求String data = "{errno: 0,data: ['" + imgUrl + "']}";response.setContentType("text/text;charset=utf-8");PrintWriter out = response.getWriter(); //这里需要用JSONObject转一下String类型的数据，才能保证传回去的数据是json格式的JSONObject jsonObject = JSONObject.fromObject(data); out.print(jsonObject.toString()); //返回url地址out.flush();out.close();}
上面的java代码中有个注意的点，就是解码请求List<FileItem> fileItems = sfu.parseRequest(request);意思是解析表单中的每一个表单项，封装成FileItem对象，以List方式返回。刚开始不知道这里有问题，所以更加头大，多处错误导致本就混乱的我濒临崩溃。debug后发现这个 fileItem 的值为空，于是上网搜索解决方法，有说是表单没配这个属性 enctype=”multipart/form-data” ，但不存在，我一开始用的就是这个。
然后有博客有写到博客地址
这里springMVC 都为我们封装好成自己的文件对象了,转换的过程就在我们所配置的CommonsMultipartResolver这个转换器里面下面再来看看它的源码
他的转换器里面就是调用common-fileupload的方式解析,然后再使用parseFileItems()方法封装成自己的文件对象 .
List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
大家应该发现了上面的这句代码,已经使用过fileUpload解析过request了,你在Controller里面接收到的request都已经是解析过的,你再次使用upload进行解析获取到的肯定是空,这个就是问题的所在(大家可以在servlet里面实验,看看第二次解析后能不能获取到数据,当然是不能的)。
struts2把原始的原来S2为简化上传功能，把所有的enctype=”multipart/form-data”表单做了wrapper最后把HttpServletResquest封装成 org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper
最后解决方案：
重写parse方法，这样就可以自己设置什么操作被struts2过滤处理，什么不被过滤处理。
import java.io.IOException;import javax.servlet.http.HttpServletRequest;import org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest;public class MyMultiPartRequest extends JakartaMultiPartRequest{@Override public void parse(HttpServletRequest request, String arg1) throws IOException { String url = request.getRequestURI().toString();//取得请求的URL if(url.indexOf("picload.action")>0){//调用的是uploadWebApp.action方法 //不需要struts2的处理 }else{ //需要struts2的处理,调用回父类的方法 super.parse(request, arg1); } } }
关于最后的json数据转换，还有一点需要提，就是他需要加几个jar包，
组装和解析JSONObject的Json字符串，共需要下面六个包：
1、json-lib
2、commons-beanutils
3、commons-collections
4、commons-lang
5、commons-logging
6、ezmorph
其中commons-lang.jar包需要使用旧一点的版本，2.3,2.4,2.5好像都可以，只要其中有NestableRuntimeException.class就行，不然这个JSONObject jsonObject = JSONObject.fromObject(data);会不报错也不执行、、（有毒）
以下版本是我所使用的，可从网上找资源下载。
commons-lang-2.3.jar
commons-io-2.2.jar
commons-collections-3.2.1.jar
commons-fileupload-1.3.1.jar
commons-logging-1.2.jar
ezmorph-1.0.6.jar
哦还有一点，这个编辑器的123版本给用户使用的变量大部分都不相同，各位网友记得仔细仔细再仔细、、、、、
大概就是这样了，可能还有些问题，各位道友请多指教。
上传附件功能等我弄出来之后再更、
好了，时隔…多日- -，终于搞出来，简单的上传下载附件功能也弄了好久，事情较多，然后没有然后，都是借口哈哈哈哈哈
