本文实例为大家分享了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了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/CJaver/article/details/38317455