dwz+nutz+xheditor 论坛输入框上传图片

作为一个渣渣实习生，是时候写些东西来提高自己啦。上周在弄富文本输入框，弄了一半，今早来弄了下，终于大功告成了。准备记录一下。里面的代码有部分是参照网上资料的。在开写的时候，才发现，实现的功能就是csdn这个输入框的图片上传功能，跪了。

做的项目是dwz+nutz框架来实现的。实际上dwz来实现这个富文本的输入框相当容易。只需要引入相关文件后，将class设置一下即可。我将用两种方法来实现，下面是第一种，用servlet来实现

首先是前台界面，主要是这个upImgUrl的设置，TemaPLay即项目名称，后面servlet/upLoadServlet是在web.xml中配置的servlet，如下所示：

<textarea name="textEditor" class="editor" cols="90" rows="15" upImgUrl="/TeamPlay/servlet/upLoadServlet" upImgExt="jpg,jpeg,gif,png" ></textarea>

配置web.xml文件，如下所示

    <servlet>        <servlet-name>upLoadServlet</servlet-name>        <servlet-class>com.wonders.maintainfaq.upLoadAt</servlet-class>    </servlet>    <servlet-mapping><servlet-name>upLoadServlet</servlet-name><url-pattern>/servlet/upLoadServlet</url-pattern>   </servlet-mapping>

写后台的action，如下所示

package com.wonders.maintainfaq;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.io.Serializable;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.Iterator;import java.util.List;import java.util.Map;import java.util.UUID;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.DiskFileUpload;import org.apache.commons.fileupload.FileItem;import org.apache.commons.lang.StringUtils;import org.nutz.mvc.Mvcs;import org.nutz.mvc.annotation.Param;import org.nutz.mvc.upload.TempFile;/** * xhEditor文件上传的Java - Servlet实现. * @author easinchu * */@SuppressWarnings({ "serial", "deprecation" })public class upLoadAt extends HttpServlet {private static String baseDir = "/ARTICLE_IMG/";//上传文件存储目录private static String fileExt = "jpg,jpeg,bmp,gif,png";private static Long maxSize = 0l;// 0:不建目录 1:按天存入目录 2:按月存入目录 3:按扩展名存目录 建议使用按天存private static String dirType = "1";/** * 文件上传初始化工作 */public void init() throws ServletException {/*获取web.xml中servlet的配置文件目录参数*/baseDir = this.getInitParameter("baseDir");/*获取文件上传存储的相当路径*/if (StringUtils.isBlank(baseDir)) baseDir = "/ARTICLE_IMG/";String realBaseDir = this.getServletConfig().getServletContext().getRealPath(baseDir);File baseFile = new File(realBaseDir);if (!baseFile.exists()) {baseFile.mkdir();}/*获取文件类型参数*/fileExt = this.getInitParameter("fileExt");if (StringUtils.isBlank(fileExt)) fileExt = "jpg,jpeg,gif,bmp,png";/*获取文件大小参数*/String maxSize_str = this.getInitParameter("maxSize");if (StringUtils.isNotBlank(maxSize_str)) maxSize = new Long(maxSize_str);/*获取文件目录类型参数*/dirType = this.getInitParameter("dirType");if (StringUtils.isBlank(dirType))dirType = "1";if (",0,1,2,3,".indexOf("," + dirType + ",") < 0)dirType = "1";}/** * 上传文件数据处理过程 */@SuppressWarnings({"unchecked" })public void doPost11(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html; charset=UTF-8");response.setHeader("Cache-Control", "no-cache");String err = "";String newFileName = "D:/Winter.jpg";printInfo(response, err, newFileName);}/** * 上传文件数据处理过程 */@SuppressWarnings({"unchecked" })public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html; charset=UTF-8");response.setHeader("Cache-Control", "no-cache");String err = "";String newFileName = ""; request = Mvcs.getReq();DiskFileUpload upload = new DiskFileUpload();try {List<FileItem> items = upload.parseRequest(request);Map<String, Serializable> fields = new HashMap<String, Serializable>();Iterator<FileItem> iter = items.iterator();while (iter.hasNext()) {FileItem item = (FileItem) iter.next();if (item.isFormField())fields.put(item.getFieldName(), item.getString());elsefields.put(item.getFieldName(), item);}/*获取表单的上传文件*///@Param("userids")String userids[] ;FileItem uploadFile = (FileItem)fields.get("filedata");/*获取文件上传路径名称*/String fileNameLong = uploadFile.getName();//System.out.println("fileNameLong:" + fileNameLong);/*获取文件扩展名*//*索引加1的效果是只取xxx.jpg的jpg*/String extensionName = fileNameLong.substring(fileNameLong.lastIndexOf(".") + 1);//System.out.println("extensionName:" + extensionName);/*检查文件类型*/if (("," + fileExt.toLowerCase() + ",").indexOf("," + extensionName.toLowerCase() + ",") < 0){printInfo(response, "不允许上传此类型的文件", "");return;}/*文件是否为空*/if (uploadFile.getSize() == 0){printInfo(response, "上传文件不能为空", "");return;}/*检查文件大小*/if (maxSize > 0 && uploadFile.getSize() > maxSize){printInfo(response, "上传文件的大小超出限制", "");return;}//0:不建目录, 1:按天存入目录, 2:按月存入目录, 3:按扩展名存目录.建议使用按天存.String fileFolder = "";if (dirType.equalsIgnoreCase("1"))fileFolder = new SimpleDateFormat("yyyyMMdd").format(new Date());;if (dirType.equalsIgnoreCase("2"))fileFolder = new SimpleDateFormat("yyyyMM").format(new Date());if (dirType.equalsIgnoreCase("3"))fileFolder = extensionName.toLowerCase();/*文件存储的相对路径*/String saveDirPath = baseDir + fileFolder + "/";//System.out.println("saveDirPath:" + saveDirPath);/*文件存储在容器中的绝对路径*/String saveFilePath = this.getServletConfig().getServletContext().getRealPath("") + saveDirPath;//System.out.println("saveFilePath:" + saveFilePath);/*构建文件目录以及目录文件*/File fileDir = new File(saveFilePath);if (!fileDir.exists()) {fileDir.mkdirs();}/*重命名文件*/String filename = UUID.randomUUID().toString();File savefile = new File(saveFilePath + filename + "." + extensionName);/*存储上传文件*///System.out.println(upload == null);uploadFile.write(savefile);//这个地方根据项目的不一样，需要做一些特别的定制。newFileName = "/TeamPlay" + saveDirPath + filename + "." + extensionName;//System.out.println("newFileName:" + newFileName);} catch (Exception ex) {System.out.println(ex.getMessage());newFileName = "";err = "错误: " + ex.getMessage();}printInfo(response, err, newFileName);}/** * 使用I/O流输出 json格式的数据 * @param response * @param err * @param newFileName * @throws IOException */public void printInfo(HttpServletResponse response, String err, String newFileName) throws IOException {PrintWriter out = response.getWriter();//String filename = newFileName.substring(newFileName.lastIndexOf("/") + 1);out.println("{\"err\":\"" + err + "\",\"msg\":\"" + newFileName + "\"}");out.flush();out.close();}}

主要的思路就是，从前台向后台传了一个filedata，这个是自带的，不需要我们自己来写，我们拿到这个filedata后，解析后获得要上传的文件的路径，然后把它拷贝到我们的项目中，最后想前台返回一个字符串

"{\"err\":\"" + err + "\",\"msg\":\"" + newFileName + "\"}"

用来指示此文件现在所在的路径。就大功告成了。前台不需要再多写一些其他的。

第二种方法是nutz来实现。基本思路都一样，就是配置的url稍有不同。前台如下所示

<textarea name="resolveWay" class="editor" cols="90" rows="15"upImgUrl="/TeamPlay/uploadImage/image" upImgExt="jpg,jpeg,gif,png" ></textarea>

配置后台的跳转

@At("/uploadImage")@IocBean(fields = "dao")public class upLoadImageAt extends Service{ private File filedata; @At("/image") public String upLoadImage(HttpServletRequest request){

//代码与第一种方法相同}

好吧，渣渣实习生表示，因为各种requst为空，路径调不进来折腾了好久，希望可以帮助到大家，不要再犯我这种低级错误。

接着实习去鸟。。。