Struts2+Uploadify文件上传使用详解

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