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

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

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

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

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相关技术，如有好的文章希望多多推荐推荐，谢谢了~~~