1、下载插件并编写jsp页面
插件下载地址:http://www.uploadify.com/download/
<%@ 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 '1.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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css">
-->
<link href="css/default.css" mce_href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/uploadify.css" mce_href="css/uploadify.css" rel="stylesheet" type="text/css" />
<!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">-->
<mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript" src="js/swfobject.js" mce_src="js/swfobject.js"></mce:script>
<mce:script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js" mce_src="js/jquery.uploadify.v2.1.0.min.js"></mce:script>
<mce:script type="text/javascript"><!--
function showResult(){//删除显示的上传成功结果
$("#result").html("");
}
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader': 'js/uploadify.swf',
'script': 'uploadifyAction!uploadFile.action',
'folder': 'uploads',
'cancelImg': 'js/cancel.png',
'fileDataName': 'fileInput', //和input的name属性值保持一致就好,Struts2就能处理了
'queueID': 'fileQueue',
'auto': false,//是否选取文件后自动上传
'multi': true,//是否支持多文件上传
'simUploadLimit' : 2,//每次最大上传文件数
'buttonText': 'BROWSE',//按钮上的文字
'displayData': 'percentage',//有speed和percentage两种,一个显示速度,一个显示完成百分比
'fileDesc': '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
'fileExt': '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
'onComplete': function (event, queueID, fileObj, response, data){
$("#result").html(response);//显示上传成功结果
setInterval("showResult()",2000);//两秒后删除显示的上传成功结果
}
});
});
// --></mce:script>
</head>
<body>
<div id="fileQueue"></div>
<input type="file" name="fileInput" id="fileInput" />
<a href="javascript:$('#fileInput').uploadifyUpload();" mce_href="javascript:$('#fileInput').uploadifyUpload();">上传文件</a>
<a href="javascript:$('#fileInput').uploadifyClearQueue();" mce_href="javascript:$('#fileInput').uploadifyClearQueue();">取消上传队列</a>
<div id="result"></div><!--显示结果-->
</body>
</html>
2、编写Action
package com.test.action;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadifyAction extends ActionSupport {
private File fileInput;
private String fileInputFileName;
@SuppressWarnings("deprecation")
public String uploadFile() throws Exception {
System.out.println("进入uploadFile");
String extName = "";//扩展名
String newFileName= "";//新文件名
String nowTime = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());//当前时间
String savePath = ServletActionContext.getRequest().getRealPath("");
savePath = savePath +"/uploads/";
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
//获取扩展名
if(fileInputFileName.lastIndexOf(".")>=0){
extName = fileInputFileName.substring(fileInputFileName.lastIndexOf("."));
}
newFileName = nowTime+extName;
System.out.println(newFileName);
fileInput.renameTo(new File(savePath+newFileName));
response.getWriter().print(fileInputFileName+"上传成功");
return null; //这里不需要页面转向,所以返回空就可以了
}
public File getFileInput() {
return fileInput;
}
public void setFileInput(File fileInput) {
this.fileInput = fileInput;
}
public String getFileInputFileName() {
return fileInputFileName;
}
public void setFileInputFileName(String fileInputFileName) {
this.fileInputFileName = fileInputFileName;
}
}
3、在struts.xml中添加配置
<action name="uploadifyAction" class="com.test.action.UploadifyAction" method="uploadFile"/>
4、运行效果图