这篇文章主要介绍了基于ajax实现文件上传并显示进度条,需要的朋友可以参考下
下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分，需要设计一个表单，form的属性添加 enctype="multipart/form-data"，设计一个iframe，作为隐藏。form的target等于iframe的name;
在servlet部分：文件上传用的Commons-FileupLoad，需要两个Jar，commons-fileupload和commons-io,少了第二个会报出找不到类的异常；
第一个servlet处理上传，及把上传进度保存到session,第二个servlet处理ajax请求,回传session保存的进度值；
进度条：可以用ajax拿到回传的进度值，改变图片的width实现变化；
jsp代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<%@ 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>
<link rel=
"stylesheet"
type=
"text/css"
href=
"css/progress.css"
>
<script type=
"text/javascript"
src=
"js/ul.js"
charset=
"gbk"
></script>
</head>
<body>
<form action=
"UploadServlet"
name=
"f1"
id=
"f1"
method=
"post"
enctype=
"multipart/form-data"
target=
"if"
>
<input type=
"file"
name=
"file1"
/><br><br>
<input type=
"reset"
name=
"res1"
value=
"重置"
/>
<input type=
"button"
name=
"but1"
value=
"提交"
onclick=
"go();"
/>
</form><br>
<div id=
"pro"
class=
"pro"
align=
"left"
>
<img alt=
""
src=
"photo/progress.png"
width=
"0"
height=
"15"
id=
"imgpro"
>
</div>
<span id=
"prop"
style=
"width:15px;height:15px;display: none;"
>0%</span>
<iframe id=
"if"
name=
"if"
src=
""
style=
"display: none"
></iframe>
</body>
</html>
|
这是index.jsp里的代码：
提交后还在当前页显示进度，所以要用到iframe，提交后的返回放到隐藏的iframe里，不影响页面效果；
css代码：
复制代码代码如下:
.pro{
height:15px;
width:500px;
background: #FFFFF0;
border: 1px solid #8FBC8F;
margin: 0;
padding: 0;
display:none;
position: relative;
left:25px;
float:left;
}
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
|
function
go(){
f1.submit();
document.getElementById(
"pro"
).style.display=
"block"
;
document.getElementById(
"prop"
).style.display=
""
;
timer=setInterval(
"getP()"
,50);
}
var
xmlHttpRequest;
function
getP(){
if
(window.XmlHttpRequest){
xmlHttpRequest=
new
XmlHttpRequest();
}
else
{
xmlHttpRequest=
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
xmlHttpRequest.onreadystatechange=callBack;
url=
"getProgressServlet"
;
xmlHttpRequest.open(
"post"
,url,
true
);
xmlHttpRequest.setRequestHeader(
"Content-type"
,
"application/x-www-form-urlencoded"
);
xmlHttpRequest.send(
"&timeStamp="
+(
new
Date()).getTime());
}
//回调函数
function
callBack(){
if
(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
result=xmlHttpRequest.responseText;
var
result=result.replace(/(^\s*)|(\s*$)/g,
""
);
var
res=result.split(
","
);
var
flag=res[1];
var
per=parseInt(res[0]);
var
err=res[2];
document.getElementById(
"imgpro"
).style.width=per*5+
"px"
;
document.getElementById(
"prop"
).innerHTML=per+
"%"
;
if
(flag==
"OK"
){
window.clearInterval(timer);
alert(
"上传成功！"
);
document.getElementById(
"pro"
).style.display=
"none"
;
document.getElementById(
"prop"
).innerHTML=
""
;
f1.reset();
}
if
(err!=
""
||err.length>0){
window.clearInterval(timer);
alert(err);
}
if
(flag==
null
){
window.clearInterval(timer);
}
}
}
|
flag为上传成功标记，err为出错标记；
servlet代码（UploadServlet）：
|
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
|
package com.ul.servlet;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class UploadServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码格式为utf-8
request.setCharacterEncoding(
"utf-8"
);
response.setCharacterEncoding(
"utf-8"
);
//获取session，保存进度和上传结果，上传结果初始值为NOK，当为Ok表示上传完成
HttpSession session=request.getSession();
session.setAttribute(
"prog"
,
"0"
);
session.setAttribute(
"result"
,
"NOK"
);
session.setAttribute(
"error"
,
""
);
String error=
""
;
//给上传的文件设一个最大值，这里是不得超过50MB
int maxSize=50*1024*1024;
//创建工厂对象和文件上传对象
DiskFileItemFactory factory=
new
DiskFileItemFactory();
ServletFileUpload upload=
new
ServletFileUpload(factory);
try
{
//解析上传请求
List items=upload.parseRequest(request);
Iterator itr=items.iterator();
while
(itr.hasNext()){
FileItem item=(FileItem)itr.next();
//判断是否为文件域
if
(!item.isFormField()){
if
(item.getName()!=
null
&&!item.getName().equals(
""
)){
//获取上传文件大小和文件名称
long upFileSize=item.getSize();
String fileName=item.getName();
if
(upFileSize>maxSize){
error=
"您上传的文件太大了，请选择不超过50MB的文件!"
;
break
;
}
//此时文件暂存在服务器的内存中，构造临时对象
File tempFile=
new
File(fileName);
//指定文件上传服务器的目录及文件名称
File file=
new
File(
"f:\\temp"
,tempFile.getName());
//构造输入流读文件
InputStream is=item.getInputStream();
int length=0;
byte[] by=
new
byte[1024];
double persent=0;
FileOutputStream fos=
new
FileOutputStream(file);
PrintWriter out=response.getWriter();
while
((length=is.read(by))!=-1){
//计算文件进度
persent+=length/(double)upFileSize*100D;
fos.write(by, 0, length);
session.setAttribute(
"prog"
, Math.round(persent)+
""
);
Thread.sleep(10);
}
fos.close();
Thread.sleep(1000);
}
else
{
error=
"没选择上传文件！"
;
}
}
}
}
catch
(Exception e) {
e.printStackTrace();
error=
"上传文件出现错误:"
+e.getMessage();
}
if
(!error.equals(
""
)){
session.setAttribute(
"error"
, error);
}
else
{
session.setAttribute(
"result"
,
"OK"
);
}
}
}
|
不要忘记commons-io包
servlet代码（getProgressServlet）：
|
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
|
package com.ul.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class getProgressServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding(
"utf-8"
);
response.setCharacterEncoding(
"utf-8"
);
HttpSession sesson=request.getSession();
PrintWriter out=response.getWriter();
String str=(String)sesson.getAttribute(
"prog"
)+
""
;
String res=(String)sesson.getAttribute(
"result"
);
String err=(String)sesson.getAttribute(
"error"
);
System.out.println(str+
","
+res+
","
+err);
out.print(str+
","
+res+
","
+err);
out.flush();
out.close();
}
}
|
效果图如下：
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
