webwork下uplodify的使用步骤:
1.修改web.xml文件中的拦截器配置,如下:
<filter>
<filter-name>webwork</filter-name>
<filter-class>com.opensymphony.webwork.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>webwork</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
2.在类路径下的webwork.properties中修改有关上传功能的配置,如下:
### multipart setting
webwork.tag.altSyntax = true
webwork.multipart.saveDir=javax.servlet.context.tempdir
webwork.multipart.maxSize=2097152
webwork.multipart.parser=jakarta
3.新建以xwork_upload.xml配置文件,文件内容如下:
<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.1.1//EN" "http://www.opensymphony.com/xwork/xwork-1.1.1.dtd">
<xwork>
<package name="upload" extends="webwork-default" namespace="/upload">
<interceptors>
<interceptor name="upload" class="com.opensymphony.webwork.interceptor.FileUploadInterceptor">
<param name="maximumSize">10000000</param>
</interceptor>
<interceptor-stack name="uploadStack">
<interceptor-ref name="upload" />
<interceptor-ref name="defaultStack" />
</interceptor-stack>
</interceptors>
<default-interceptor-ref name="WSStack" />
<action name="doImageUpload" class="net.survey.admin.UploadAction" method="doImageUpload">
<interceptor-ref name="params" /><!-- 将请求中的参数设置到Action中去 -->
<interceptor-ref name="basicStack" />
<interceptor-ref name="uploadStack" />
</action>
</package>
</xwork>
4.将刚刚新建的xwork_upload.xml配置文件引入到xwork.xml配置文件中
<include file="xwork_upload.xml"/>
5.根据配置文件新建net.survey.admin.UploadAction,内容如下:
public class UploadAction extends ActionSupport implements ServletRequestAware, ServletResponseAware{
private HttpServletRequest request;
private HttpServletResponse response;
private File images; //和在JS中指定的fileObjName的值相同
private String imagesFileName; //[fileName]FileName 获得上传文件的名称
private String imagesContentType;//[fileName]ContentType 获得上传文件的类型
public String doImageUpload() throws Exception {
upload("img", imagesFileName, images);
return null;
}
public void upload(String dir, String name, File file) throws Exception{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
String savePath = new String(request.getServletContext().getRealPath("/") + "\\upload\\" + dir);
if(!new File(savePath).exists())new File(savePath).mkdirs();
String file_name = new SimpleDateFormat("yyyy-MM-dd HH.mm.ss").format(new Date()) + "_" + new String(name.getBytes("gbk"), "UTF-8"); // 唯一且不重复的文件名
//文件名形如:ID.文件后缀
FileOutputStream fos = new FileOutputStream(savePath + "\\" + file_name);
FileInputStream fis = new FileInputStream(file);
Streams.copy(fis, fos, true);
/*byte[] buffer = new byte[1024];
int len = 0;
while ((len = fis.read(buffer)) > 0) {
fos.write(buffer, 0, len);
}
fos.close();
fis.close();*/
PrintWriter out = response.getWriter();
//这个地方不能少,否则前台得不到上传的结果
out.write("1");
out.close();
}
@Override
public void setServletResponse(HttpServletResponse response) {
this.response = response;
}
@Override
public void setServletRequest(HttpServletRequest request) {
this.request = request;
}
public File getImages() {
return images;
}
public void setImages(File images) {
this.images = images;
}
public String getImagesFileName() {
return imagesFileName;
}
public void setImagesFileName(String imagesFileName) {
this.imagesFileName = imagesFileName;
}
public String getImagesContentType() {
return imagesContentType;
}
public void setImagesContentType(String imagesContentType) {
this.imagesContentType = imagesContentType;
}
}
6.建立jsp页面,内容如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试CRUD</title>
<link href="../uploadify/uploadify.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../uploadify/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript" src="../uploadify/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#images").uploadify({
/*注意前面需要书写path的代码*/
'uploader' : '<%=basePath%>uploadify/uploadify.swf',
'script' : '<%=basePath%>upload/doImageUpload.action',
'cancelImg' : '<%=basePath%>uploadify/cancel.png',
'folder' : '<%=basePath%>upload/img',
'queueID' : 'imageQueue', //和存放队列的DIV的id一致
'fileDataName' : 'images', //和以下input的name属性一致
'removeCompleted': false,
'auto' : false, //是否自动开始
'multi' : true, //是否支持多文件上传
'buttonText' : '选择图片', //按钮上的文字
'simUploadLimit' : 5, //一次同步上传的文件数目
'sizeLimit' : 2097152, //设置单个文件大小限制2M
'queueSizeLimit' : 5, //队列中同时存在的文件个数限制
'fileDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
'onAllComplete' :function(event,data)
{
$('#img_result').html(data.filesUploaded +'个图片上传成功');
},
onError: function(event, queueID, fileObj) {
alert("图片:" + fileObj.name + "上传失败");
},
onCancel: function(event, queueID, fileObj){
// alert("取消了" + fileObj.name);
}
});
});
</script>
</head>
<body>
<div style="width:800px; height:600px; border:1px solid red; margin:0px auto;">
<form action="<%=request.getContextPath() %>/xxx.action" method="post">
<table>
<tr><td class="td_right">图片:</td>
<td>
<input type="file" name="images" id="images"/>
<a href="javascript:;" onClick="javascript:$('#images').uploadifyUpload()">开始上传</a> <a href="javascript:jQuery('#images').uploadifyClearQueue()">取消所有上传</a> <span id="img_result" style="font-size: 13px;color: red"></span>
<div id="imageQueue"></div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
说明:该附件中的uploadify插件已经修复了buttonText不支持中文这一bug。