Struts2+uploadify多文件上传实例

本文实例为大家分享了struts2+uploadify多文件上传的具体代码，供大家参考，具体内容如下

首先我这里使用的是  jquery  uploadify3.2的版本

导入相关的css  js  

<link rel="stylesheet" type="text/css" href="<%=basepath%>css/uploadify/uploadify.css" rel="external nofollow" >
<script src="<%=basepath%>js/jquery.min.js"></script>
<script src="<%=basepath%>js/uploadify/jquery.uploadify.min.js"></script>

接下来是  上传的 jsp 页面代码

<form action="" method="post" >
  <input type="file" name="img_file" id="img_file">
  <div id="uploadfilequeue" ></div>
  <div id="imgs" ></div>
  <div id="dialog-message" ></div>
 </form>

  <p> 
  <a href="javascript:void(0);" rel="external nofollow" onclick="myupload()">上传</a>
  <a href="javascript:$('#img_file').uploadify('cancel')" rel="external nofollow" >取消上传</a> 
 </p> 

这里是最关键的js 代码，有注释

$(function(){
  $("#img_file").uploadify({
   auto:false,//是否自动上传
  height: 30, 
    buttontext:'选择图片',
   cancelimage:'<%=basepath%>img/uploadify/uploadify-cancel.png',
  swf : '<%=basepath %>js/uploadify/uploadify.swf',
  // expressinstall:'js/uploadify/expressinstall.swf',
  uploader : '<%=basepath%>json/fileuploadaction.action', //后台处理上传文件的action 
  width : 120 ,
    'multi': true, //设置为true将允许多文件上传 
    'filesselected': '4',
    queueid:'uploadfilequeue',
  fileobjname:'img_file', //与后台action中file属性一样
     /*
     formdata:{ //附带值  
  'userid':'111',
  'username':'tom', 
   'rnd':'111'
  },
        */
    filetypedesc:'上传文件支持的文件格式:jpg,jpge,gif,png',
 filetypeexts:'*.jpg;*.jpge;*.gif;*.png',//*.jpg;*.jpge;*.gif;*.png
 queuesizelimit : 4,//只能一次上传4张图片 
 // simuploadlimit:1,//一次可以上传1个文件
 filesizelimit:'2097152',//上传文件最大值 单位为字节 2m
      //返回一个错误，选择文件的时候触发
 onselecterror:function(file, errorcode, errormsg){
  
  switch(errorcode) {
  case -100:
         alert("上传的文件数量已经超出系统限制的4个文件！");
         break;
        case -110:
         alert("文件 ["+file.name+"] 大小超出系统限制的2m大小！");
         break;
        case -120:
         alert("文件 ["+file.name+"] 大小异常！");
         break;
        case -130:
         alert("文件 ["+file.name+"] 类型不正确！");
         break;
       }
      }, //
      //上传到服务器，服务器返回相应信息到data里
      onuploadsuccess:function(file, data, response){
      var objs = eval('('+data+')');
  var phtml = "<span><img style='width:150;height:150' src='/uploads/"+objs.filename+"'></span>";
  if($("#imgs span").length==0){
       $("#imgs").html(phtml);
      }else{
       $("#imgs span:last").after(phtml);
      }
  },
      onselect : function(file) {
      //alert(file.name);   
      },
      //removecompleted:true,//上传的文件进度条是否消失
      requeueerrors:false,
      // removetimeout:2,//进度条消失的时间，默认为3
      progressdata:"percentage",//显示上传的百分比
      onuploaderror : function(file,errorcode,errormsg,errorstring,swfuploadifyqueue) { //这里是取消的时候发生 
      // $("#dialog-message").html(errorstring); 
      } 
  });
  
  });
  
  //上传文件
  function myupload(){
  $("#img_file").uploadify('upload','*'); 
  }

java 上传的action 代码

/**
 * 上传文件的action
 * @author wzh
 *
 */
@controller
@scope("prototype")
public class fileuploadaction extends baseaction {
 private file img_file;
 private string img_filecontenttype;//格式同上"filename"+contenttype 
 private string img_filefilename;//格式同上"filename"+filename 
 private string savepath;//文件上传后保存的路径
 private map<string, object> datamap = new hashmap<string, object>();
 
 @override
 /***
 * 上传文件
 */
 public string execute() throws exception{
 
 system.out.println("savepath"+getsavepath());
 
 file dir=new file(getsavepath()); 
 system.out.println(dir.getabsolutepath());
 
 //判断是否存在路径
   if(!dir.exists()){ 
    dir.mkdirs(); 
   } 
   
   //当前上传的文件
   file file=getimg_file();
   //获得后缀
   string ext =fileutil.getextensionname(getimg_filefilename()); 
   string newfilename = uuid.randomuuid()+ext;
    fileoutputstream fos=new fileoutputstream(getsavepath()+"//"+newfilename); 
    fileinputstream fis=new fileinputstream(getimg_file()); 
    byte []buffers=new byte[1024]; 
    int len=0; 
    while((len=fis.read(buffers))!=-1){ 
     fos.write(buffers,0,len); 
    } 
 
    fos.close();
    fis.close();
 
   // string uploadfilename = getimg_filefilename();
    datamap.put("filename",newfilename);
 
 return success;
 }

<!-- 文件上传相关的 -->
 <action name="fileuploadaction" class="fileuploadaction">
  <param name="savepath">e:/tomcat6.0/webapps/uploads</param> 
  <result type="json">
 <param name="root">datamap</param>
 </result>
</action>

配置完以上的基本就ok了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。