这次给大家带来fileupload上传文件带进度条效果的实现步奏，实现fileupload上传文件带进度条效果的注意事项有哪些，下面就是实战案例，一起来看一下。
文件上传过程中，如果我们能看到进度条会更好，实现思路是服务器端用监听器实时监听进度并存入session，客户端异步请求服务器端获得上传进度，并进行效果渲染。
效果图：
服务器端servlet：
public class uploadservlet extends httpservlet {
@override
protected void doget(httpservletrequest req, httpservletresponse resp)
throws servletexception, ioexception {
//取出监听器myprogress在session中保存的进度信息
string progress=(string) req.getsession().getattribute(progress);
//响应
resp.getwriter().print(progress);
//清除session中保存的数据
// req.getsession().removeattribute(progress);
}
@override
protected void dopost(httpservletrequest req, httpservletresponse resp)
throws servletexception, ioexception {
req.setcharacterencoding(utf-8);
diskfileitemfactory factory=new diskfileitemfactory();
servletfileupload upload=new servletfileupload(factory);
upload.setprogresslistener(new myprogresslistener(req));
try {
list<fileitem> list = upload.parserequest(req);
for (fileitem fileitem : list) {
if (fileitem.isformfield()) {//普通表单
}else{//上传文件
string path=req.getrealpath(uploads);
string filename=fileitem.getname();
file file=new file(path, filename);
fileitem.write(file);
system.out.println(成功上传文件：+filename);
}
}
} catch (exception e) {
system.out.println(文件上传发生错误！);
e.printstacktrace();
}
}
}
服务器端监听器：
public class myprogresslistener implements progresslistener {
private httpsession session;
public myprogresslistener(httpservletrequest request){
session = request.getsession();
}
@override
public void update(long pbytesread, long pcontentlength, int pitems) {
//将数据进行格式化
//已读取数据由字节转换为m
double readm=pbytesread/1024.0/1024.0;
//已读取数据由字节转换为m
double totalm=pcontentlength/1024.0/1024.0;
//已读取百分百
double percent=readm/totalm;
//格式化数据
//已读取
string readf=dataformat(pbytesread);
//总大小
string totalf=dataformat(pcontentlength);
//进度百分百
numberformat format=numberformat.getpercentinstance();
string progress=format.format(percent);
//将信息存入session
session.setattribute(progress, progress);
//打印消息到控制台
system.out.println(pbytesread===>+pbytesread);
system.out.println(pcontentlength==>+pcontentlength);
system.out.println(pitems===>+pitems);
system.out.println(readf--->+readf);
system.out.println(totalf--->+totalf);
system.out.println(progress--->+progress);
}
/**
* 格式化读取数据的显示
* @param data要格式化的数据 单位byte
* @return 格式化后的数据，如果小于1m显示单位为kb，如果大于1m显示单位为m
*/
public string dataformat(double data){
string formdata=;
if (data>=1024*1024) {//大于等于1m
formdata=double.tostring(data/1024/1024)+m;
}else if(data>=1024){//大于等于1kb
formdata=double.tostring(data/1024)+kb;
}else{//小于1kb
formdata=double.tostring(data)+byte;
}
return formdata.substring(0, formdata.indexof(.)+2);
}
}
客户端：
<html>
<head>
<base href="<%=basepath%> rel=external nofollow >
<title>带进度条的文件上传效果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<style type="text/css">
#progressbar{width: 300px;height: 20px;border: 1px #eee solid;}
#progress{width: 0%;height: 20px;background-color: lime;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
function upload(){
$(#f1).submit();
var pro=null;
pro=setinterval(function(){
$.get(uploadservlet,,function(data){
if(data=='100%'){
clearinterval(pro);
$(#proinfo).text(上传进度：100%);
//更新进度条
$(#progress).width(100%);
}else{//正在上传
//更新进度信息
$(#proinfo).text(上传进度：+data);
//更新进度条
$(#progress).width(data);
}
});
},200);
}
</script>
</head>
<body>
<iframe name="aa" style="display: none;"></iframe>
<h2>带进度条的文件上传效果</h2>
<form target="aa" id="f1" action="uploadservlet" method="post" enctype="multipart/form-data">
文件：<input name="file" type="file">
<input type="button" value="上传" onclick="upload();">
<p id="progressbar">
<p id="progress"></p>
</p>
<span id="proinfo">上传进度：0%</span>
</form>
</body>
</html>
说明：为了让上传后该页面不跳转，我们可以让表单跳转至一个隐藏的iframe。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js请求servlet实现ajax请求的步骤详解
ajax在不刷新的情况下检测输入的用户名
以上就是fileupload上传文件带进度条效果的实现步奏的详细内容。