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