Struts2+uploadify多文件上传实例

时间:2022-08-26 18:14:57

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

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

导入相关的css  js  

?
1
2
3
<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 页面代码

?
1
2
3
4
5
6
7
8
9
10
11
<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 代码,有注释

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
$(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 代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/**
 * 上传文件的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;
 }
?
1
2
3
4
5
6
7
<!-- 文件上传相关的 -->
 <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了。

Struts2+uploadify多文件上传实例

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

原文链接:https://blog.csdn.net/CJaver/article/details/38317455