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 id="alertinfo">
       <h4><span>上传图片</span><span id="close" οnclick="closeAlert();">关闭</span></h4>
  <p><input type="file" id="actpic" class="sub" name="formActivityInfo.actpic"/>

<input type="button" value="开始上传" class="sub" οnclick="$('#actpic').uploadify('upload','*');"/>
  </p>
  <div id="file_queue"></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?actid="+actid +
   //  "&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:当每一个文件上传成功时触发

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值