前一篇文章可以看到对jquery uploadify的属性的讲解，这里给出具体的java代码实现，代码基于servlet，实现了上传图片并预览的效果，不多说，上代码
index.jsp
|
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
|
<%@ page language=
"java"
contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>Insert title here</title>
<!--引入jquery.js-->
<script src=
"scripts/jquery-1.10.2.min.js"
></script>
<!--引入uploadify.js-->
<script src=
"scripts/jquery.uploadify.min.js"
type=
"text/javascript"
></script>
<!--引入uploadify.css-->
<link href=
"css/uploadify.css"
rel=
"stylesheet"
type=
"text/css"
/>
<!--引入自己写的css-->
<link href=
"css/customer.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script type=
"text/javascript"
>
$(function() {
$(
"#upload_org_code"
).uploadify({
'auto'
:
true
,
'buttonClass'
:
'mybutton'
,
'buttonCursor'
:
'hand'
,
'buttonText'
:
'选择图片'
,
'fileSizeLimit'
:
'2MB'
,
'height'
:
27
,
'width'
:
80
,
'fileTypeExts'
:
'*.jpg;*.jpge;*.gif;*.png'
,
'fileTypeDesc'
:
'请选择jpg,jpge,jif,png后缀结尾的图片'
,
'progressData'
:
'speed'
,
'queueID'
:
'some_file_queue'
,
'removeCompleted'
:
false
,
'queueSizeLimit'
:
2
,
'removeTimeout'
:
1
,
'swf'
:
'${pageContext.request.contextPath}/scripts/uploadify.swf'
,
<!--这是关键，上传后台处理的servlet地址-->
'uploader'
:
'${pageContext.request.contextPath}/uploadifyServlet'
,
'multi'
:
false
,
//加上此句会重写onSelectError方法【需要重写的事件】
'overrideEvents'
: [
'onSelectError'
,
'onDialogClose'
,
'onCancel'
,
'onClearQueue'
],
'onCancel'
:function(file){
console.log(file.name);
},
'onClearQueue'
:function(queueItemCount){
console.log(queueItemCount);
},
'onDestroy'
:function(){
console.log(
'destory'
);
},
'onDialogClose'
:function(queueData){
console.log(queueData.filesSelected );
console.log(queueData.filesQueued );
},
'onUploadSuccess'
:function(file,data,response){
$(
'#'
+ file.id).find(
'.data'
).html(
''
);
console.log(
'data='
+data);
$(
"#upload_org_code_name"
).val(data);
<!--这是关键，预览后台处理的servlet地址-->
$(
"#upload_org_code_img"
).attr(
"src"
,
"${pageContext.request.contextPath}/getImgServlet?file="
+data);
$(
"#upload_org_code_img"
).show();
},
//返回一个错误，选择文件的时候触发
'onSelectError'
:function(file, errorCode, errorMsg){
switch
(errorCode) {
case
-
110
:
alert(
"文件 ["
+file.name+
"] 大小超出系统限制的"
+ jQuery(
'#upload_org_code'
).uploadify(
'settings'
,
'fileSizeLimit'
) +
"大小！"
);
break
;
case
-
120
:
alert(
"文件 ["
+file.name+
"] 大小异常！"
);
break
;
case
-
130
:
alert(
"文件 ["
+file.name+
"] 类型不正确！"
);
break
;
}
},
});
});
</script>
</head>
<body>
<!--用于图片预览的显示-->
<img style=
"display: none"
id=
"upload_org_code_img"
src=
""
width=
"100"
height=
"100"
/>
<input type=
"file"
name=
"upload_org_code"
id=
"upload_org_code"
/>
<!--自定义的一个queue-->
<div id=
"some_file_queue"
>
</div>
<!--一些操作啦-->
<a href=
"javascript:jQuery('#upload_org_code').uploadify('upload','*');"
>上传</a>
<a href=
"javascript:$('#upload_org_code').uploadify('cancel','*')"
>取消上传</a>
<a href=
"javascript:$('#upload_org_code').uploadify('destroy')"
>destory</a>
</body>
</html>
|
其中，js中定义了上传处理的uploadifyServlet地址，所以下一步就是编写改servlet了
uploadifyServlet.java
|
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
|
public
class
uploadifyServlet
extends
HttpServlet {
private
String configPath=
"d:/image/"
;
public
void
doGet(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
this
.doPost(request, response);
}
public
void
doPost(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
String ret_fileName =
null
;
//返回给前端已修改的图片名称
request.setCharacterEncoding(
"UTF-8"
);
response.setContentType(
"text/html; charset=UTF-8"
);
PrintWriter out = response.getWriter();
// 文件保存目录路径
String savePath = configPath;
DiskFileItemFactory factory =
new
DiskFileItemFactory();
ServletFileUpload upload =
new
ServletFileUpload(factory);
upload.setHeaderEncoding(
"UTF-8"
);
try
{
List<?> items = upload.parseRequest(request);
Iterator<?> itr = items.iterator();
while
(itr.hasNext()) {
DiskFileItem item = (DiskFileItem) itr.next();
String fileName = item.getName();
if
(fileName!=
null
){
ret_fileName = fileName;
}
if
(!item.isFormField()) {
try
{
File uploadedFile =
new
File(savePath,fileName);
OutputStream os =
new
FileOutputStream(uploadedFile);
InputStream is = item.getInputStream();
byte
buf[] =
new
byte
[
1024
];
// 可以修改 1024 以提高读取速度
int
length =
0
;
while
((length = is.read(buf)) >
0
) {
os.write(buf,
0
, length);
}
// 关闭流
os.flush();
os.close();
is.close();
}
catch
(Exception e) {
e.printStackTrace();
}
}
}
}
catch
(FileUploadException e) {
e.printStackTrace();
}
//将已修改的图片名称返回前端
out.print(ret_fileName);
out.flush();
out.close();
}
}
|
上述代码的意思很简单，将上传的文件放入指定的文件夹，并返回图片的名称。
到此为止，上传就结束了，下面是预览。
在onUploadSuccess中，我们得到了上传成功图片的返回的图片名称，其中我们定义了实现预览效果的后台servlet，getImgServlet
下面给出改servlet的代码
|
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
|
public
class
getImg
extends
HttpServlet {
private
String configPath=
"d:/image/"
;
public
void
doGet(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
this
.doPost(request, response);
}
public
void
doPost(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
String file = request.getParameter(
"file"
);
File pic =
new
File(configPath+file);
FileInputStream fis =
new
FileInputStream(pic);
OutputStream os = response.getOutputStream();
try
{
int
count =
0
;
byte
[] buffer =
new
byte
[
1024
*
1024
];
while
((count = fis.read(buffer)) != -
1
)
os.write(buffer,
0
, count);
os.flush();
}
catch
(IOException e) {
e.printStackTrace();
}
finally
{
if
(os !=
null
)
os.close();
if
(fis !=
null
)
fis.close();
}
}
}
|
上述代码很简单，得到传过来的文件名之后，直接发送文件流过去，实现图片显示
具体的项目包地址如下，大家可直接下载运行：
http://yun.baidu.com/share/link?shareid=702477080&uk=2836507213
本文转自布拉君君 51CTO博客，原文链接：http://blog.51cto.com/5148737/1588035，如需转载请自行联系原作者
