文件上传过程中,如果我们能看到进度条会更好,实现思路是服务器端用监听器实时监听进度并存入会话,客户端异步请求服务器端获得上传进度,并进行效果渲染。
效果图:
服务器端servlet:
公共类UploadServlet扩展了httpersvlet { @ Override protected void doGet(httpersvletrequest req,HttpServletResponse resp)引发ServletException,IOException { //取出监听器我的进步在会议中保存的进度信息字符串进度=(字符串)req.getSession().getAttribute(' progress ');//响应resp.getWriter().打印(进度);//清除会议中保存的数据//req.getSession().removeAttribute('进度');} @ Override protected void doPost(httpersvletrequest req,HttpServletResponse resp)引发ServletException,IOException { req。setcharacter encoding(' UTF-8 ');DiskFileItemFactory工厂=new DiskFileItemFactory();servlet文件上传上传=新servlet文件上传(工厂);upload.setProgressListener(新的my progress listener(req));请尝试{ ListFileItem list=上传。parserequest(请求);用于(文件项目文件项目:列表){ if (fileItem.isFormField()) {//普通表单}else{//上传文件字符串路径=req.getRealPath('上传');字符串文件名=文件项目。GetName();文件文件=新文件(路径,文件名);fileItem.write(文件);System.out.println('成功上传文件:' FIlename);} } } catch(异常e) { System.out.println('文件上传发生错误!');e . print stack trace();} }}服务器端监听器:
公共类我的进度监听器实现了进度侦听器{私有HttpSession会话;公共MyProgressListener(HttpServletrequest请求){会话=请求。get session();} @覆盖公共空的更新(长pBytesRead,长pContentLength,int pItems) { //将数据进行格式化//已读取数据由字节转换为m double ReadM=pbytesRead/1024.0/1024.0;//已读取数据由字节转换为m double TotalM=PContetLengt/1024.0/1024.0;//已读取百分百双倍百分比=ReadM/TotalM;//格式化数据//已读取string readf=数据格式(pBytesRead);//总大小字符串total f=数据格式(pcontetlength);//进度百分百数字格式格式=数字格式。getpercentinstance();字符串进度=format.format(百分比);//将信息存入会话会话。SetAttribute(' progress ',progress);//打印消息到控制台系统。出去。println(' pBytesRead==' pBytesRead ');系统。出去。println(' pcontetlength==' pcontetlength ');系统。出去。println(' PiTems==' PiTems ');系统。出去。println(' readf '-readf);系统。出去。println(' totalf '-totalf);系统。出去。println(' progress-' progress);} /** * 格式化读取数据的显示* @param数据要格式化的数据单位字节* @返回格式化后的数据,如果小于1M显示单位为KB,如果大于1M显示单位为M */公共字符串数据格式(双数据){字符串形式数据=' ';如果(数据=1024*1024) {//大于等于1M formdata=double。tostring(data/1024/1024)‘M’;}else if(数据=1024){//大于等于1KB formdata=Double.toString(数据/1024)' KB ';}else{//小于1KB formdata=Double.toString(数据)“byte”;}返回formdata.substring(0,formdata.indexOf('。') 2);}}客户端:
html标题基本href=' %=基本路径% ' rel='外部无跟随'标题带进度条的文件上传效果/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=' keywords 1,keywords 2,keywords 3 ' meta http-equiv=' description ' content='这是我的页面样式类型=' text/CSS ' #进度条{ width 3: 300 px高: 20pxborder: 1px #EEE固体;} #进度{宽度:% 0%;高度: 20像素背景色:石灰;}/style脚本类型=' text/JavaScript ' src=' http : js/jquery-1。4 .2 .js '/script脚本类型=' text/JavaScript '函数upload(){ $(' # f1 ').submit();var pro=nullpro=setInterval(function(){ $).get('UploadServlet ','),function(data){ if(data==' 100% '){ clearInterval(pro);$('#proInfo ').文本('上传进度:100%');//更新进度条$('#progress ').宽度(' 100% ');}else{//正在上传//更新进度信息$('#proInfo ').文本('上传进度:' '数据);//更新进度条$('#progress ').宽度(数据);} });},200);}/script/head body iframe name=' aa ' style=' display : none;'/iframe h2带进度条的文件上传效果/h2表单目标='aa' id='f1 '操作='UploadServlet '方法=' post ' enctype=' multipart/form-data '文件:输入名称=“文件”类型=“文件”输入类型='按钮'值='上传onclick=' upload();div id='进度条' div id='进度'/div/div span id=' proInfo '上传进度:0%/span/表单/正文/html说明:为了让上传后该页面不跳转,我们可以让表单跳转至一个隐藏的iframe。
以上这篇基于文件上传文件上传带进度条效果的实例(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。