效果图：
Action类
public class UploadifyAction {
private File uploadify;
/* 该文件名的命名规则是File输入框的name+FileName */
private String uploadifyFileName;
public String upload() {
/* 文件扩展名 */
String extName = "";
/* 文件保存的位置 */
String saveRealFilePath = "";
/*
* 相对路径，虚拟目录配置 <Context path="/p_w_picpaths" docBase="相对路径[项目位置]"></Context>
* 浏览器访问图片的路径是p_w_picpaths/xx.jpg 实际存放路径是docBase
*/
saveRealFilePath = ServletActionContext.getServletContext()
.getRealPath("/upload");
/*
* 绝对路径， 虚拟目录配置 <Context path="/p_w_picpaths" docBase="绝对路径"></Context>
* 浏览器访问图片的路径是p_w_picpaths/xx.jpg 实际存放路径是docBase
*/
saveRealFilePath = "D:\\upload";
File fileDir = new File(saveRealFilePath);
if (!fileDir.exists()) {
fileDir.mkdirs();
}
File savefile;
if (uploadifyFileName.lastIndexOf(".") >= 0) {
extName = uploadifyFileName.substring(uploadifyFileName
.lastIndexOf("."));
}
String nowTime = "" + new Date().getTime();
savefile = new File(saveRealFilePath, nowTime + extName);
try {
// Photo photo = new Photo();
// photo.setCatId(Integer.parseInt(catId));
// photo.setPhotoName(nowTime + extName);
// boolean result = this.save(photo);
FileUtils.copyFile(uploadify, savefile);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.getWriter().print(uploadifyFileName + "上传成功");
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
HTML页面
<%@ 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>批量上传文件实例代码</title>
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<link rel="stylesheet" type="text/css" href="uploadify/css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/uploadify.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
/* swf文件路径 */
'swf' : "flash/uploadify.swf?t=" + new Date().getTime()
/* 服务器端请求的路径 */
,'uploader' : "upload.action?t=" + new Date().getTime()
/* 最多上传文件的数量，默认999 */
,'uploadLimit' : 20
,'cancelImg' : '<%=basePath%>p_w_picpaths/cancel.png'
/* 在上传完成后是否删除队列中的元素，默认为True，即上传完成后看不到上传文件进度条了 */
,'removeComplated' : false
,'fileObjName' : 'uploadify'
/* 表示上传完成后多久删除队列中的进度条，默认为3 秒 */
,'removeTimeout':3
/* 若设置true那么在上传过程中因为错误而导致上传失败的文件将被重新加入队列。 */
,'requestErrors':true
/* 文件上传完成后等待服务器响应的时间，超过该时间那么将认为上传成功，默认是30秒 */
,'successTimeout':3
/* 文件类型描述 */
,'fileTypeDesc' : 'rar文件或zip文件'
/* 控制可上传文件的扩展名，用分号隔开启用本项时需同时声明filedesc */
,'fileTypeExts' : '*.rar;*.zip;*.gif;*.jpg;' //
/* 上传文件大小限制，默认单位KB，例如：大小限制100KB则该属性值为'100KB' */
,'fileSizeLimit' : '100000KB' //
/* 表示选择文件后是否自动上传，默认为true */
,'auto' : false
/* 额外增加选择文件按钮的样式
,'buttomClass' : 'uploadBtn'*/
/* 选择文件按钮Hover时鼠标形状默认是'hand' */
,'buttomCursor' : 'pointer'
/* 选择文件按钮的背景图片，默认值是null */
,'buttonImage' : null
/* 选择文件按钮显示的文字，默认是SELECT FILES */
,'buttonText' : "选择文件"
/* 检查文件是否存在的路径，默认是false
,'checkExisting' : 'false'; */
/* 是否启用DEBUG模式，默认是false
,'debug' : false; */
/* 是否支持多文件上传，默认为true */
,'multi' : true
/* 若设置为true，一个随机数将被加载swf文件URL的后面，防止浏览器缓存，默认为true */
,'preventCaching' : true
/* 设置文件上传时显示的数据，all：上传速度+百分比，'上传速度'或者'百分比',分别对应'speed'和'precentage' */
,'progressData' : 'speed'
/* 选择文件后，把文件放入到指定的位置成队列的区块ID，与下面的id对应 */
,'queueID' : 'fileQueue'
/* 队列长度限制，默认为999 */
,'queueSizeLimit' : 200
/* 队列中的每个文件上传完成时触发一次 */
,onUploadComplete : function(file) {
// alert('文件' + file.name + '处理完成');
$("#tips").html('文件' + file.name + '处理完成').show(300).delay(3000).hide(300); // 三秒后消失;
// alert( "id: " + file.id + " - 索引: " + file.index + " - 文件名: " + file.name + " - 文件大小: " + file.size + " - 类型: " + file.type + " - 创建日期: " + file.creationdate + " - 修改日期: " + file.modificationdate + " - 文件状态: " + file.filestatus);
}
/* 队列中的每个文件出现错误时触发一次 */
,'onUploadError' : function(file, errorCode, errorMsg, errorString) {
$("#tips").html("文件" + file.name + "不能上传，提示信息: " + errorString + ",错误代码" + errorCode + "错误信息" + errorMsg).show(300).delay(3000).hide(300); // 三秒后消失;
// alert("文件" + file.name + "不能上传，提示信息: " + errorString + ",错误代码" + errorCode + "错误信息" + errorMsg);
}
/* 队列中的文件上传进度 */
,'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
$('#progress').html(totalBytesUploaded + " bytes uploaded of " + totalBytesTotal + " bytes.");
}
/* 当选择某个文件时触发（选择多个文件触发多次） */
,'onSelect' : function(file) {
// alert("文件" + file.name + "添加到了文件上传队列里.");
$("#tips").html("文件" + file.name + "添加到了文件上传队列里.").show(300).delay(3000).hide(300); // 三秒后消失
}
/* 检测FLASH失败调用 */
,'onFallback':function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
}
/* 从队列里边移除文件 */
,'onClearQueue' : function(queueItemCount) {
// alert(queueItemCount + "个文件从队列里边移除");
$("#tips").html(queueItemCount + "个文件从队列里边移除").show(300).delay(3000).hide(300); // 三秒后消失
}
/* 上传到服务器，服务器返回相应信息到data里 */
/*,'onUploadSuccess':function(file, data, response){
alert(data);
}
//返回一个错误，选择文件的时候触发
,'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#uploadify').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadify').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
}*/
});
});
</script>
<style type="text/css">
.inputcss {
color: #333333;
font-family: "Tahoma";
font-size: 12px;
border: solid 1px #CCCCCC;
}
.buttoncss {
color: #333333;
font-family: "Tahoma";
font-size: 12px;
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
}
</style>
</head>
<body>
<span id="tips" style="width:auto; top:10px;left: 300px; background: #68AF02;"></span>
<table style="width: 90%;">
<tr>
<td style="width: 100px;">
<input type="file" name="uploadify" id="uploadify" />
</td>
<td align="left">
<a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
<span id="result" style="font-size: 13px;color: red"></span>
</td>
</tr>
</table>
<div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
</body>
</html>
需要用到的插件：
uploadify.swf
jquery.uploadify-3.2.min.js
swfobject.js
uploadify.swf
jquery.uploadify-3.2.min.js
swfobject.js
