Jquery_Uploadify3.2与Struts2结合学习笔记
1、 下载到官方网址下载“uploadify3.2”插件。
2、 下载swfobject_2_2js插件
3、 搭建struts2框架。
4、 创建upload2.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>Jquery插件上传</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">
<link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
<script type="text/javascript" src="js/uploadify/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="js/uploadify/uploadify.js"></script>
<script type="text/javascript" src="js/uploadify/uploadify.min.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
$(function() {
$("#file_upload").uploadify({
debug:false,
auto:true,//是否自动上传
height: 30,
buttonText:'上传文件',
cancelImage:'js/uploadify/uploadify-cancel.png',
swf : 'js/uploadify/uploadify.swf',
expressInstall:'js/uploadify/expressInstall.swf',
uploader : '<%=path%>/upload/fileUpload.action', //后台处理上传文件的action
width : 120 ,
multi:false,//是否允许多个文件上传
queueID:'uploadfileQueue',
fileObjName:'fileName', //与后台Action中file属性一样
formData:{ //附带值
'userid':'111',
'username':'tom',
'rnd':'111'
},
successTimeout:99999,//上传超时时间
overrideEvents:['onDialogClose'],
fileTypeDesc:'上传文件支持的文件格式:jpg,jpge,gif,png',
fileTypeExts:'*.*',//*.jpg;*.jpge;*.gif;*.png
queueSizeLimit : 3,//
// simUploadLimit:1,//一次可以上传1个文件
fileSizeLimit:'20MB',//上传文件最大值
//返回一个错误，选择文件的时候触发
onSelectError:function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
},
//每次更新上载的文件的进展
onUploadProgress: function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
//alert(bytesUploaded);
//有时候上传进度什么想自己个性化控制，可以利用这个方法
//使用方法见官方说明
},
//检测FLASH失败调用
onFallback:function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
//上传到服务器，服务器返回相应信息到data里
onUploadSuccess:function(file, data, response){
var fileNameAndPath=data.split(",");
var phtml="<p><a href='#' onlick=downLoad('"+fileNameAndPath[1]+"')>"+fileNameAndPath[0]+"</a><img alt='删除' src='js/uploadify/uploadify-cancel.png' onclick=delFile(this)></p>";
if($("#uploadfileQueue p").length==0){
$("#uploadfileQueue").html(phtml);
}else{
$("#uploadfileQueue p:last").after(phtml);
}
//alert(data+"上传成功");
},
onSelect : function(file) {
//alert(file.name);
},
removeCompleted:true,//上传的文件进度条是否消失
requeueErrors:false,
removeTimeout:2,//进度条消失的时间，默认为3
progressData:"percentage",//显示上传的百分比
onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
$("#dialog-message").html(errorString);
} ,
onError:function(event, queueID, fileObj){
alert("文件:" + fileObj.name + " 上传失败");
}
});
});
//删除文件
function delFile(obj){
$(obj).parent().remove();
}
</script>
</head>
<body>
<input type="file" id="file_upload" name="fileName">
<div id="uploadfileQueue" style="width: 400px;">
</div>
</body>
</html>
5、 创建处理上传文件FileUploadAction.java,内容如下：
/**
* @title FileUploadAction.java
* @package com.ys.uploadfile.action
* @description 文件描述
* @author lijf
* @update 2012-12-13 下午04:17:35
* @version V1.0
*/
package com.ys.uploadfile.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.nio.charset.Charset;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.ServletRequestAware;
import com.opensymphony.xwork2.ActionSupport;
public class FileUploadAction extends ActionSupport implements ServletRequestAware {
/**
* @fields serialVersionUID
*/
private static final long serialVersionUID = 1L;
private HttpServletRequest request;
private List<File> fileName;//这里的"fileName"一定要与表单中的文件域名相同
private List<String> fileNameContentType;//格式同上"fileName"+ContentType
private List<String> fileNameFileName;//格式同上"fileName"+FileName
private String savePath;//文件上传后保存的路径
/**
*
* @return
* @throws Exception
* @author lijf
* @description 上传文件
* @update 2013-1-26 下午02:15:26
*/
public void upload() throws Exception {//intentionPicture
String uploadFilename="";
File dir=new File(getSavePath());
String savePath=getSavePath();//保存上传文件的地址
if(!dir.exists()){
dir.mkdirs();
}
List<File> files=getFileName();
for(int i=0;i<files.size();i++){
FileOutputStream fos=new FileOutputStream(getSavePath()+"\\"+getFileNameFileName().get(i));
FileInputStream fis=new FileInputStream(getFileName().get(i));
byte []buffers=new byte[1024];
int len=0;
while((len=fis.read(buffers))!=-1){
fos.write(buffers,0,len);
}
fos.close();
fis.close();
uploadFileName=getFileNameFileName().get(i);
}
//设置响应内容的字符串编码
ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
ServletActionContext.getResponse().setContentType("text/plain");
ServletActionContext.getResponse().getWriter().print(uploadFileName+","+savePath+"\\"+uploadFileName);
}
/* (non-Javadoc)下载文件
* @see com.opensymphony.xwork2.ActionSupport#execute()
*/
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
return "success";
}
public InputStream getInputStream() {
return ServletActionContext.getServletContext().getResourceAsStream("/" + fileName);
}
/* (non-Javadoc)
* @see org.apache.struts2.interceptor.ServletRequestAware#setServletRequest(javax.servlet.http.HttpServletRequest)
*/
public void setServletRequest(HttpServletRequest req) {
this.request=req;
}
public List<File> getFileName() {
return fileName;
}
public void setFileName(List<File> fileName) {
this.fileName = fileName;
}
public List<String> getFileNameContentType() {
return fileNameContentType;
}
public void setFileNameContentType(List<String> fileNameContentType) {
this.fileNameContentType = fileNameContentType;
}
public List<String> getFileNameFileName() {
return fileNameFileName;
}
public void setFileNameFileName(List<String> fileNameFileName) {
this.fileNameFileName = fileNameFileName;
}
@SuppressWarnings("deprecation")
public String getSavePath() {
return request.getRealPath(savePath);
}
public void setSavePath(String savePath) {
this.savePath = savePath;
}
}
6、 struts2.xml配置内容如下
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<!-- 上传文件的action -->
<constant name="struts.multipart.maxSize" value="1024000000"/>
<package name="upload" namespace="/upload" extends="struts-default">
<action name="fileUpload" class="com.ys.uploadfile.action.FileUploadAction" method="upload">
<param name="savePath">/uploads</param>
</action>
</package>
</struts>
注：uploadify的属性配置请参考附件