Struts2文件上传--多文件上传(插件uploadify)

公司需要把以前的Struts2自带的图片上传替换掉，因为不能一个file选择多个文件，本人直接百度搜索图片插件，貌似就它（uploadify3.2.1）在最前面，也找过很多案例，其中有不少问题，好了直接代码

1、导入插件（我这里用的是uploadify3.2.1）

把uploadify3.2.1放在webroot下面,如图：（在页面引入插件的js和css我就不贴图了）

Struts2文件上传--多文件上传(插件uploadify)

2、初始化插件

html：

<div class="picOP">

   <form action="<%=basePath %>mng/saveProductPicture.do" id="uploadForm" method="post" enctype="multipart/form-data">

         <input id="inputPicFile" name="inputPicFile" type="file"/>

         <span id="fileSize">已选择0个文件</span>

         <input type="button" class="btn btn-default" value="上传">

         <div style="display: none" id="fileOkMSgDiv" class="form-group">

             <span id="fileOk"></span>

         </div>

   </form>

</div>

js：这里是初始化插件

$(function(){

    $("#inputPicFile").uploadify({

        'debug'     : false, //开启调试

        'auto'           : false, //是否自动上传

        'swf'            : '<%=basePath %>uploadify3.2.1/uploadify.swf',  //引入uploadify.swf

        'uploader'       : 'saveProductPicture.do',//请求路径

        'formData'    : {'uid':$("#pid").val()},

        'queueID'        : 'fileQueue',//队列id,用来展示上传进度的

            'width'     : '130',  //按钮宽度

            'height'    : '30',  //按钮高度

        'queueSizeLimit' : 99,  //同时上传文件的个数

        'simUploadLimit': 99,

        'uploadLimit'     : 99,

        'fileTypeDesc'   : '图片文件(*.jpg;*.gif;*.png)',    //可选择文件类型说明

        'fileTypeExts'   : '*.jpg;*.gif;*.png', //控制可上传文件的扩展名

        'multi'          : true,  //允许多文件上传

        'buttonText'     : '请选择图片',//按钮上的文字

        'fileSizeLimit' : '250KB', //设置单个文件大小限制

        'fileObjName' : 'inputPicFile',  //<input type="file"/>的name

        'method' : 'post',

        'removeCompleted' : true,//上传完成后自动删除队列

        'onFallback':function(){

            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");

        },

        'onUploadSuccess' : function(file, data, response){//单个文件上传成功触发

                               //data就是action中返回来的数据

        },'onQueueComplete' : function(){//所有文件上传完成

            $("#fileOkMSgDiv").css("display", "");

            $("#fileOk").text("文件上传......OK");

            this.queueData.files = [];

            fileSizeNum = 0;

            isSelectFile = false;

            $('#inputPicFile').uploadify('settings', 'buttonText','请选择图片');

            $("#fileSize").text("已选择"+fileSizeNum+"个文件");

            loadMorePhoto($("#pid").val(), '', '');

        },'overrideEvents': ['onSelectError', 'onDialogClose',    'onDialogOpen'] ,//声明被从写的事件

        'onDialogOpen':function(){//打开选择文件窗口

            fileSizeNum = 0;

            isSelectFile = false;

            this.queueData.files = [];

            $('#inputPicFile').uploadify('settings', 'buttonText','请选择图片');

            $("#fileOkMSgDiv").css({display:"none"});

            $("#fileSize").text("已选择"+fileSizeNum+"个文件");

            $("#fileOk").text("");

        },

        'onSelectError': function(file, error,errorMsg){//选择错误事件

//             debugger;

            switch(error){

            case -110:

                alert("文件["+file.name+"]大小超出系统限制的"+$("#inputPicFile").uploadify('settings', 'fileSizeLimit')+"大小");

                break;

            case -130:

                alert("文件["+file.name+"]类型不对");

                break;

            };

            return false;

        },

        'onSelect': function(file){//选择图片是触发

//             debugger;

             if(file){

                isSelectFile = true;

                 fileSizeNum = fileSizeNum+1;

                 $("#fileSize").css("display", "");

                 $('#inputPicFile').uploadify('settings', 'buttonText','请点击上传图片');

             }

               $("#fileSize").text("已选择"+fileSizeNum+"个文件");

        },

        'onUploadStart': function(file){//上传文件时触发

            $('#inputPicFile').uploadify('settings', 'buttonText','玩命上传中，请稍候...');

        }

     });

});

然后想说明一下的是，在初始化的时候插件时只能传递固定的参数，不能等页面加载后用jQuery去获取，传递过去的也是一个null，

传递动态的参数：

//上传图片——这里的代码是在js文件中，上面的初始化是在jsp页面中
var isSelectFile = false;//这个变量使用来判断是否选择图片的
var fileSizeNum = 0;//这个是用来显示选择图片的数量的

$(".picOP input.btn-default").on("click", function(){

    if(!isSelectFile){

        alert('请选择图片后在上传！');

        return;

    }

    $('#inputPicFile').uploadify('settings','formData',{'uid':$("#pid").val()});//这里是动态传递参数

    $('#inputPicFile').uploadify('upload', '*');//上传所有文件

    return;

});

Java后台代码：

     public String saveProductPicture(){

         System.out.println("进入方法");

         String uid = request.getParameter("uid");

         try {

             if (StringUtils.isNotBlank(uid)) {

                 String xdPath = sc.getInitParameter("UPLOAD_IMAGE_PRODUCT");

                 File file = new File(xdPath+"/"+uid);

                 if (!file.exists() && !file.isDirectory()) {

                     file.mkdirs();

                 }

                 Long l = System.currentTimeMillis();

                 file = new File(file, l+"");

                 inputPicFile.renameTo(file);

                 uploadPhotoService.saveUploadPhoto(l, uid, inputPicFileFileName, "1", "product");

                 response.getWriter().print("success");

             }

         } catch (Exception e) {

             e.printStackTrace();

         }

         return null;

     }//

目前公司是直接拷贝到服务器上面，没有上传到第三方服务器。

如果你发现传输数据的过程中被Struts2拦截器给拦截了，我当时说的时候我的类型不对，后来我在Struts2的配置文件中发现：

<interceptor-ref name="defaultStack">

                    <param name="modelDriven.refreshModelBeforeResult">true</param>

                    <!-- 文件大小 -->

                    <param name="fileUpload.maximumSize">256000</param>

                    <!-- 文件扩展名 -->

                    <param name="fileUpload.allowedExtensions">.jpg,.jpeg,.png,.bmp,.gif</param>

                    <!-- 文件内容类型 -->

<!--                     <param name="fileUpload.allowedTypes">image/jpg,image/jpeg,image/png,image/x-png,image/bmp,image/gif</param> -->

</interceptor-ref>

注释掉文件扩展名或者文件内容类型中的一个即可，该地方还需要优化。

最后，关于uploadify的事件，最好是看看插件的源码，就明白了。

本人热爱Java相关技术，如有好的文章希望多多推荐推荐，谢谢了~~~

秒客网

Struts2文件上传--多文件上传(插件uploadify)

相关文章