公司需要把以前的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后台代码:
1 public String saveProductPicture(){ 2 System.out.println("进入方法"); 3 String uid = request.getParameter("uid"); 4 try { 5 if (StringUtils.isNotBlank(uid)) { 6 String xdPath = sc.getInitParameter("UPLOAD_IMAGE_PRODUCT"); 7 File file = new File(xdPath+"/"+uid); 8 if (!file.exists() && !file.isDirectory()) { 9 file.mkdirs(); 10 } 11 Long l = System.currentTimeMillis(); 12 file = new File(file, l+""); 13 inputPicFile.renameTo(file); 14 15 uploadPhotoService.saveUploadPhoto(l, uid, inputPicFileFileName, "1", "product"); 16 response.getWriter().print("success"); 17 } 18 } catch (Exception e) { 19 e.printStackTrace(); 20 } 21 return null; 22 }//
目前公司是直接拷贝到服务器上面,没有上传到第三方服务器。
如果你发现传输数据的过程中被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相关技术,如有好的文章希望多多推荐推荐,谢谢了~~~