struts2结合uploadify-v3.1完成批量图片上传功能

最近需要做一个批量上传图片的功能

用了很多方法,有的很复杂,有的没有成功

最后用了uploadify,去网上下了个最新的3.1版本,但是网上多数都是2.×的例子,已经有很多配置不一样了。

所以有下了个参考手册,一点点的配置,终于成功了。

参考手册地址,我的是不想要积分就可以下的,呵呵

http://download.csdn.net/detail/wjc1000/4342812

先把我的代码上了吧

呵呵,直接点

 

jsp的包含文件

<link rel="stylesheet" type="text/css" href="${kdt}/js/uploadify-v3.1/uploadify.css" /> 
<script type="text/javascript" src="${kdt}/js/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script>

我看有的还有

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

但是我以前就引用了,所以就没有用,这个根据自己的情况来。

 

js代码

有些引用的路径需要根据自己的改下

例如

 'swf'      : '${kdt}/js/uploadify-v3.1/uploadify.swf',

 

$(function() { 
   $("#actpic").uploadify({
    //是组件自带的flash,用于打开选取本地文件的按钮
    'swf'      : '${kdt}/js/uploadify-v3.1/uploadify.swf',
    //服务器端 脚本文件路径
    'uploader': 'activity_saveImage.html',
    //取消上传文件的按钮图片,就是个叉叉
    'cancel': '${kdt}/js/uploadify-v3.1/uploadify-cancel.png',
    //和input的name属性值保持一致就好,Struts2就能处理了
    'fileObjName'   : 'formActivityInfo.actpic',
      //按钮上的文字
       'buttonText'     : '选择图片',
       //是否选取文件后自动上传
       'auto': false,
       //上传文件大小限制
       'fileSizeLimit':'3024KB',
       //同时上传的文件最大数
       'queueSizeLimit':'10',
       //调用后台action时传递的参数
       'formData':{ 'actid':'${activityInfo.id}','userid':'${sessionScope.user.userid}' },
       //有speed和percentage两种,一个显示速度,一个显示完成百分比
     'displayData'    : 'percentage',
     //如果配置了以下的'fileExt'属性,那么这个属性是必须的
     'fileTypeDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.',
     //允许的格式
          'fileTypeExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',
    //显示待上传文件列表的div区域
    'queueID':'file_queue',
    //全部文件上传完触发(上传完成后,跳转的页面)
    'onQueueComplete' : function(queueData) {
           document.location.href = "activity_showActivity.html?actid=${activityInfo.id}&imgpage=${imgPageCtrl.currentPage}&interflowpage=${interPageCtrl.currentPage}&tabflag="+tabflag;
    }
   }); 
  });

 

 

html代码

<div >
       <h4><span>上传图片</span><span onclick="closeAlert();">关闭</span></h4>
  <p><input type="file" name="formActivityInfo.actpic"/>

<input type="button" value="开始上传" onclick="$('#actpic').uploadify('upload','*');"/>
  </p>
  <div ></div>
  </div>

 

java代码

private File actpic;
 private String actpicFileName;
 private String imageUrl;

 

public String saveImage() throws Exception {
  logger.info("ActivityAction-saveImage-begin");
 
  try {
  
   //取得参数 活动id
   String actid = request.getParameter("actid")!=null?request.getParameter("actid"):"";
   //用户id
   String userid = request.getParameter("userid")!=null?request.getParameter("userid"):"";
  
   Actpic paraActpic = new Actpic();
   paraActpic.setActid(actid);
   paraActpic.setApplyby(userid);
  
   //保存图片,如果是可上传的文件类型
   String fileUrl="";
   if(UploadTools.isAllowUpload(formActivityInfo.getActpicFileName()))
   {
    fileUrl=UploadTools.uploadFile(formActivityInfo.getActpic(), formActivityInfo.getActpicFileName());
    //生成缩略图
    UploadTools.makeSmallPic(fileUrl,140,95,false);
   }
   paraActpic.setUrl(fileUrl);
   //根据id取得活动信息
  
   boolean returns = ServiceFactory.getActivityService().insertActpic(paraActpic);
 
   if (!returns) {
    logger.info("ActivityAction-saveImage-end_error");
    return redirectToMsg("数据处理失败,请重新尝试!");
   }
   //取得tab页flag
   String tabflag = request.getParameter("tabflag")!=null?request.getParameter("tabflag"):"1";
   //取得tab页flag
   String imgpage = request.getParameter("imgpage")!=null?request.getParameter("imgpage"):"1";
   //取得tab页flag
   String interflowpage = request.getParameter("interflowpage")!=null?request.getParameter("interflowpage"):"1";
   //response.sendRedirect("activity_showActivity.html?act&imgpage=" + imgpage + "&interflowpage=" + interflowpage+ "&tabflag=" + tabflag);
  } catch(Exception e){
   logger.info("ActivityAction-saveImage-end-error");
   return redirectToMsg("数据处理失败,请重新尝试!");
  }

  logger.info("ActivityAction-saveImage-end");
  return showActivity();
 }

 

上面就是所有的代码了

有些代码是多余的,还没有及时删除,但是不多,根据自己的要求改改吧。

 

下面加一些配置项的说明,呵呵,网上找的,我就是结合参考手册和下面的内容弄出来的

auto:Input Type Boolean,是否自动上传,默认true;     buttonClass:Input Type String, uploadify按钮上添加的样式名称;     buttonCursor:Input Type String,鼠标移上去时的鼠标手势,有'hand'和'arrow'两个选项;     buttonImage:Input Type String,按钮背景图片;     buttonText:Input Type String,按钮文字片;     checkExisting:Input Type String,是否检查文件是否已经被上传;     debug:Input Type Boolean,是否进入调试模式,默认false;     fileObjName:Input Type String,后台表单接受的名称,默认Filedata;     fileSizeLimit:Input Type Number,上传的文件大小,接受单位为B, KB, MB, or GB的数字,默认单位为KB,设置成0表示无限制,'fileSizeLimit' : '100KB';     fileTypeDesc:     fileTypeExts:Input Type String,允许的文件后缀,(i.e. ‘*.jpg; *.png; *.gif’).;     formData:Input Type JSON Object,要传递的其它参数;     height:Input Type Number,按钮高度;     method:Input Type String,上传的方式,post或者get,默认post;     multi:Input Type Boolean,是否允许多文件上传,默认true;     overrideEvents:     preventCaching:     progressData:Input Type String,当上传的时候,显示的内容,有‘percentage’ or ‘speed’两个选项,即显示百分比或显示上传速度;     queueID:Input Type String,上传文件的队列ID;     queueSizeLimit:Input Type Number,一次可以上传的文件数量,默认999;     removeCompleted:Input Type Boolean,是否移除已完成的文件,默认true;     removeTimeout:Input Type Number,已完成文件的移除延迟时间,默认3;     requeueErrors:     successTimeout:Input Type Number,等待服务器处理文件的时间,默认30s,当超过时,就认为文件已经正确上传;     swf:Input Type String,uploadify.swf的路径,默认'uploadify.swf';     uploader:Input Type String,服务端处理脚本,默认'uploadify.php';     uploadLimit:Input Type Number,上传的最大数量,默认999;     width:Input Type Number,按钮宽度,默认120;     那些事件:     onCancel:当一个文件从队列中移除时触发;     onClearQueue:当清空队列时触发;     onDestroy:当调用destroy时触发;     onDialogClose:当对话框关闭时触发;     onDialogOpen:当对话框打开时触发;     onDisable:当uploadify实例被调用disable方法时触发;     onEnable:当uploadify实例被调用enable方法时触发;     onFallback:     onInit:实例被初始化时触发;     onQueueComplete:队列完成时触发;     onSelect:当选择某一文件时触发;     onSelectError:当选择文件,发生错误时触发;     onSWFReady:当falsh boject加载完毕时触发;     onUploadComplete:当文件(单个)上传成功时触发,不管成功还是失败;     onUploadError:当上传单个发生错误时触发;     onUploadProgress:上传过程中触发;     onUploadStart:     onUploadSuccess:当每一个文件上传成功时触发

推荐文章

Linux中搭建YUM

Linux中搭建YUM

推荐文章

想在facebook抱怨老板又怕被炒鱿鱼?看这里!

想在facebook抱怨老板又怕被炒鱿鱼?看这里!

推荐文章

Linux 允许root用户远程登陆

Linux 允许root用户远程登陆

推荐文章

Linux系统简介、安装RHEL7系统、RHEL7基本操作

Linux系统简介、安装RHEL7系统、RHEL7基本操作

推荐文章

如何在保证睡眠的情况把各种事情做好

如何在保证睡眠的情况把各种事情做好

推荐文章

一、目录结构的特点

一、目录结构的特点

推荐文章

MQTT技术:为物联网而生

MQTT技术:为物联网而生

推荐文章

zabbix 3.4 安装记录

zabbix 3.4 安装记录

推荐文章

数据中心的重要服务器如何保护?

数据中心的重要服务器如何保护?

推荐文章

文件类型和文件扩展名

文件类型和文件扩展名

推荐文章

关于测试

关于测试

推荐文章

Linux dd命令

Linux dd命令

推荐文章

利用二维码进行市场推广的十大新玩法

利用二维码进行市场推广的十大新玩法

推荐文章

其他技术----Redis说明

其他技术----Redis说明

推荐文章

搜索大战烈度将超过电商?

搜索大战烈度将超过电商?

推荐文章

linux如何查看端口被哪个进程占用?

linux如何查看端口被哪个进程占用?