最近,公司要求做的一个项目涉及到文件上传,因为页面同时有四个上传按钮,要求是无页面刷新,所以想到了用Jquery的Ajax进行上传,但是由于本人 没查到JQuery的文件上传组件,因此就去网上搜索,找到了一个很好的组件ajaxFileUpload,利用此组件成功实现了异步文件上传!
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
|
第一步:需要导入jquery-1.7.2.min.js、ajaxfileupload.js两个文件,在jsp页面引入的顺序必须是jquery-1.7.2.min.js在先,ajaxfileupload.js在后,因为ajaxfileupload.js依赖与jquery包,所以你懂得!
jsp页面代码:
<!-- lang: html -->
<
button
id
=
"uploadSubmit"
type
=
"submit"
class
=
"btn btn-sm btn-info col-md-1 col-md-offset-1"
onclick
=
"FileUpload('uploadSubmit');"
>
<
span
class
=
"glyphicon glyphicon-upload"
></
span
>Upload
</
button
>
js代码:
<!-- lang: js -->
function FileUpload(buttonId) {
$.ajaxFileUpload({
url : 'fileUpload!upload',// 用于文件上传的服务器端请求地址
type : "post",
dataType : "json",
timeout : 1000,
secureuri : false,// 一般设置为false
fileElementId : uploadId,// 文件上传空间的id属性 <
input
type
=
"file"
id
=
"uploadId"
/>
error : function(XMLHttpRequest, textStatus, errorThrown) {
},
success : function(data) {
}
});
|
}
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!-- lang: java -->
package
cn.caculate.web.action;
import
java.io.BufferedInputStream;
import
java.io.BufferedOutputStream;
import
java.io.File;
import
java.io.FileInputStream;
import
java.io.FileOutputStream;
import
java.io.InputStream;
import
java.io.OutputStream;
import
org.apache.struts2.ServletActionContext;
import
org.apache.struts2.convention.annotation.Action;
import
org.apache.struts2.convention.annotation.InterceptorRef;
import
org.apache.struts2.convention.annotation.InterceptorRefs;
import
org.apache.struts2.convention.annotation.Result;
import
org.apache.struts2.convention.annotation.Results;
import
org.springframework.beans.factory.annotation.Autowired;
import
cn.caculate.service.upload.IFileUploadService;
import
com.opensymphony.xwork2.ActionSupport;
@Action
(
"fileUpload"
)
@InterceptorRefs
(value = {
@InterceptorRef
(
"fileUploadStack"
) })
@Results
({
@Result
(name =
"jsonType"
, type =
"json"
) })
public
class
CopyOfFileUploadAction
extends
ActionSupport {
private
static
final
long
serialVersionUID = 1L;
private
static
final
int
BUFFER_SIZE =
16
*
1024
;
/**
* 需要上传的文件
*/
private
File upload;
/**
* 上传文件的类型
*/
private
String uploadContentType;
/**
* 文件名
*/
private
String uploadFileName;
/**
* 上传之后的文件名
*/
private
String storageFileName;
/**
* 文件上传的路径
*/
public
String path = ServletActionContext.getServletContext().getRealPath(
File.separator +
"WEB-INF"
+ File.separator +
"file"
);
/**
* 新文件上传
*
* @return
*/
public
String upload() {
try
{
// 将Struts2自动封装的文件名赋给要写入的文件
storageFileName = uploadFileName;
// 创建要写入的文件
File storageFile =
new
File(path +
"//"
+ storageFileName);
copy(upload, storageFile);
return
"jsonType"
;
}
catch
(Exception e) {
e.printStackTrace();
}
return
null
;
}
/**
* 上传文件的主要方法
*
* @param src
* @param dst
* @return
*/
public
boolean
copy(File src, File dst) {
try
{
InputStream in =
null
;
OutputStream out =
null
;
try
{
in =
new
BufferedInputStream(
new
FileInputStream(src),
BUFFER_SIZE);
out =
new
BufferedOutputStream(
new
FileOutputStream(dst),
BUFFER_SIZE);
byte
[] buffer =
new
byte
[BUFFER_SIZE];
while
(in.read(buffer) >
0
) {
out.write(buffer);
}
}
finally
{
if
(
null
!= in) {
in.close();
}
if
(
null
!= out) {
out.close();
}
}
}
catch
(Exception e) {
e.printStackTrace();
}
return
true
;
}
public
File getUpload() {
return
upload;
}
public
void
setUpload(File upload) {
this
.upload = upload;
}
public
String getUploadContentType() {
return
uploadContentType;
}
public
void
setUploadContentType(String uploadContentType) {
this
.uploadContentType = uploadContentType;
}
public
String getUploadFileName() {
return
uploadFileName;
}
public
void
setUploadFileName(String uploadFileName) {
this
.uploadFileName = uploadFileName;
}
public
String getStorageFileName() {
return
storageFileName;
}
public
void
setStorageFileName(String storageFileName) {
this
.storageFileName = storageFileName;
}
public
String getPath() {
return
path;
}
public
void
setPath(String path) {
this
.path = path;
}
|
}