基于fileUpload文件上传带进度条效果的实例(必看)
程序员文章站
2022-03-07 12:45:36
文件上传过程中，如果我们能看到进度条会更好，实现思路是服务器端用监听器实时监听进度并存入session，客户端异步请求服务器端获得上传进度，并进行效果渲染。
效果图：...
文件上传过程中，如果我们能看到进度条会更好，实现思路是服务器端用监听器实时监听进度并存入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();">
<div id="progressbar">
<div id="progress"></div>
</div>
<span id="proinfo">上传进度：0%</span>
</form>
</body>
</html>
说明：为了让上传后该页面不跳转，我们可以让表单跳转至一个隐藏的iframe。
以上这篇基于fileupload文件上传带进度条效果的实例(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。