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

转载于:https://www.cnblogs.com/hongzai/p/3193316.html