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