Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例是php版本的，本文将详细介绍Uploadify在java中的使用，您也可以点击下面的链接进行演示或下载。
创建工程那些话就不多说了，上张图先看看项目结构。
demo只是入门，所以比较简单。也更能够理解uploadify插件如何使用。
学习struts2的人都知道，要使用struts2，首先要在web.xml中配置过滤器 。如：
|
1
2
3
4
5
6
7
8
9
|
<!-- struts2 过滤器 --> struts2
<!-- org.apache.struts2.dispatcher.FilterDispatcher -->
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
struts2
/*
|
然后在WebContent目录下新建index.jsp页面,将下载好的uploadify插件所需的js、swf和css文件引入到页面。如:
|
1
2
|
<link href="<%=basePath%>main/js/uploadify/uploadify.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="<%=basePath%>main/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=basePath%>main/js/uploadify/jquery.uploadify-3.1.min.js"></script>
|
然后在jquery的ready的方法里面加入以下代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
$(function() {
$("#uploadFile").uploadify({
'buttonText':'选择上传数据',
'width' : 200,
'swf' : '<%=basePath%>main/js/uploadify/uploadify.swf',
'uploader' : '<%=basePath%>uploadActionURl.action;jsessionid=<%=session.getId()%>',
'cancelImage' : '<%=basePath%>main/js/uploadify/uploadify-cancel.png',
'method' : 'get',
'postData' : {},
'button_image_url':'<%=basePath%>',
'fileObjName' : 'uploadFile',
'auto' : false,
'multi' : true,
'queueID' : 'fileQueue',
'debug' : false,
'removeCompleted' : true,
'removeTimeout' : 0.5,
'requeueErrors' : true,
'progressData' : "all",
'queueSizeLimit' : 10,
'fileSizeLimit' : 50 * 1024 * 1024,
// 'fileTypeDesc' : 'Excel2007,2003',
// 'fileTypeExts' : '*.xlsx;*.xls',
'onUploadProgress' : function(file, bytesUploaded,
bytesTotal, totalBytesUploaded,
totalBytesTotal, queueBytesLoaded) {
$("#result").append(
"</pre>
<div>文件\"" + file.name + "\"共"
+ totalBytesTotal + "字节，已上传"
+ totalBytesUploaded
+ "字节!</div>
<pre>");
if (totalBytesUploaded == totalBytesTotal) {
$("#result").append(
"</pre>
<div>文件\"" + file.name
+ "\"上传成功！</div>
<pre>");
}
},
'onUploadComplete' : function(file) {
},
'onUploadSuccess' : function(file, data, response) {
// alert(data);
var retdata = eval("(" + data + ")");
alert(retdata.msg);
//提示消息
$("#result").append(
"</pre>
<div>" + retdata.msg + "</div>
<pre>");
},
'onUploadError' : function(file, errorCode,
errorMsg, errorString, swfuploadifyQueue) {
$("#result").html(errorString);
},
});
});
|
jsp的body部分非常干净，几句代码就可以搞定。如：
|
1
2
3
4
5
6
7
8
9
|
</pre>
<div class="div_row1"><input id="uploadFile" type="file" name="uploadFile" />
<div id="fileQueue"></div>
<div id="result"></div>
<div id="progress"></div>
</div>
<pre>
<a href="javascript:$('#uploadFile').uploadify('upload','*')">开始上传</a>
<a href="javascript:$('#uploadFile').uploadify('cancel', '*')">取消上传队列</a>
|
做到这步上传的效果是有了，但是action并没有处理。因此还需要一个action来处理上传的文件。
一般的思路先要设置编码，防止中文乱码问题。然后截取文件的后缀名，根据系统时间重新生成一个文件名。再将文件复制到某个文件夹。或者是解析上传的数据，持久化到数据库。action代码较多，就不贴出来了。如果需要可以去http://pan.baidu.com/share/link?shareid=3798293928&uk=587859240下载，结合代码学习。下一章对uploadify常用的属性和方法做个说明。
界面效果预览：
点击上传，弹出上传成功对话框后。就能在D盘找到上传的文件了。
原创文章，转载请注明： 转载自java开发者
本文链接地址: Struts2+Uploadify文件上传使用详解