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文件上传使用详解