当前位置:文档之家› 使用struts2及xheditor实现文件、图片上传(支持拖拽上传)

使用struts2及xheditor实现文件、图片上传(支持拖拽上传)

xheditor +struts2 文件上传(一般情况和支持HTML5拖拽上传)1、准备工作Struts2.2.3导入相关jar包Xheditor1.1.4引入jquery和xheditor的js文件2、效果图a) 使用上传图片按钮进行上次b) 将图片进行拖入上传(支持html5的浏览器)3、相关代码a)单纯的使用普通方式上传:如下图:Struts2中Action中的方法:和传统的上传没什么区别,记得写getter和setterXheditor官方要求:返回内容必需是标准的json字符串,结构可以是如下:{"err":"","msg":"200906030521128703.gif"} 或者{"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}} 注:若选择结构2,则url变量是必有注意:1.上传成功时返回的json字符串是:{"err":"","msg":"200906030521128703.gif"}2.err是””,不能省略,3.方式1,msg返回值是上传成功文件的路径;4.方式2,则msg中的url是上传成功文件的路径5.url第一个字符是!表示立即上传,不需要点确定就插入到textarea中Jsp中:【特别应该注意的是:html5Upload:false;如果不设置成false,在支持html5的浏览器(eg:chrome)中,会默认使用html5上传的方式,导致未设置multipart/form-data上传失败,而在不支持html5,例如IE中正常。

】吐槽一下,xheditor的作者为何不默认上传使用传统方式,且html5Upload默认还是true,官方也没有明显的说明,因为这个问题测试了很久。

b)支持html5的拖拽上传官方说明:HTML5上传的整个POST数据流就是上传的文件完整数据,而本地文件名等信息储存于HTTP_CONTENT_DISPOSITION这个服务器变量中。

也就是说,如果是html5实现的文件上次,我们可以从request的header的Content-Disposition中获得相关数据,可以打开浏览器的网络监测查看。

Struts2中Action中的方法:Jsp中:无任何变化,把html5Upload =true即可注:本程序未对细节做过多的处理,重在实现上传,比如上传文件的限制,上传成功后的回调函数未做处理。

问后附上了完整的程序,本人邮箱623565791@欢迎交流。

4、完整代码下面是完整代码,如果您还有什么问题,可以参考:Struts2packagecom.zhy.xheditor.action;importjava.io.File;importjava.io.IOException;importjava.io.PrintWriter;importjavax.servlet.ServletInputStream;importjavax.servlet.http.HttpServletResponse;mons.io.FileUtils;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")public class FileUpload extends ActionSupport{public File filedata;public String filedataFileName;public void ajaxFileUpload(){String dirPath = ServletActionContext.getRequest().getSession().getServletContext().getRealPath("");File dir = new File(dirPath + "/resources/upload");String contentDisposition = ServletActionContext.getRequest().getHeader("Content-Disposition");// 如果是HTML5上传文件,那么这里有相应头的if (contentDisposition != null){// HTML5拖拽上传文件Long fileSize = Long.valueOf(ServletActionContext.getRequest().getHeader("Content-Length"));// 上传的文件大小String fileName = contentDisposition.substring(contentDisposition.lastIndexOf("filename=\""));// 文件名称fileName = fileName.replaceAll("filename=\"", "");fileName = fileName.substring(0, fileName.length() - 1);System.out.println(fileName);ServletInputStreaminputStream = null;try{System.out.println("invoked!");inputStream = ServletActionContext.getRequest().getInputStream();if (inputStream != null){FileUtils.copyInputStreamToFile(inputStream, new File(dir,fileName));String msg = "{\"err\":\"\",\"msg\":{\"url\":\"!"+ ServletActionContext.getRequest().getContextPath() + "/resources/upload/"+ fileName+ "\",\"localfile\":\"test.jpg\",\"id\":\"1\"}} ";System.out.println("xheditor using html5 ..." + fileName);writer(msg);System.out.println("xheditor using html5 ..." + fileName);}} catch (IOException e){e.printStackTrace();}return;}try{System.out.println("xheditor using common ..." + filedataFileName);FileUtils.copyFile(filedata, new File(dir, filedataFileName));String msg = "{\"err\":\"\",\"msg\":{\"url\":\"!"+ ServletActionContext.getRequest().getContextPath()+ "/resources/upload/" + filedataFileName+ "\",\"localfile\":\"test.jpg\",\"id\":\"1\"}} ";writer(msg);} catch (IOException e){e.printStackTrace();}}private void writer(String msg){try{System.out.println("invoked!!..");HttpServletResponseresp = ServletActionContext.getResponse();resp.setCharacterEncoding("utf-8");resp.setContentType("text/plain");PrintWriter out = resp.getWriter();out.write(msg);out.flush();} catch (IOException e){e.printStackTrace();}}}Jsp:<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma"content="no-cache"><meta http-equiv="cache-control"content="no-cache"><meta http-equiv="expires"content="0"><meta http-equiv="keywords"content="keyword1,keyword2,keyword3"> <meta http-equiv="description"content="This is my page"><script type="text/javascript"src="<%=request.getContextPath()%>/resources/jquery-1.7.2.js"></script><script type="text/javascript"src="<%=request.getContextPath()%>/resources/xheditor-1.1.14/xhed itor-1.1.14/xheditor-1.1.14-zh-cn.min.js"></script><script type="text/javascript">$(function(){$("#xheditor").xheditor({upLinkUrl:$("#contextPath").val()+"/upload!ajaxFileUpload",upLinkExt:"zip,rar,txt",upImgUrl:$("#contextPath").val()+"/upload!ajaxFileUpload",upImgExt:"jpg,jpeg,gif,png",upFlashUrl:$("#contextPath").val()+"/upload!ajaxFileUpload",upFlashExt:"swf",upMediaUrl:$("#contextPath").val()+"/upload!ajaxFileUpload",upMediaExt:"avi",html5Upload:true,width:800,height:600});});</script></head><body><textarea rows=""cols=""id="xheditor"></textarea> </body><input type="hidden"id="contextPath"value="<%=request.getContextPath()%>"/></html>Struts.xml<?xml version="1.0"encoding="UTF-8"?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "/dtds/struts-2.0.dtd"><struts><constant name="struts.enable.DynamicMethodInvocation"value="true"/> <constant name="struts.devMode"value="false"/><package name="default"namespace="/"extends="struts-default"><action name="upload"class="com.zhy.xheditor.action.FileUpload"> </action></package></struts>。

相关主题