文件上传过程中，如果我们能看到进度条会更好，实现思路是服务器端用监听器实时监听进度并存入会话，客户端异步请求服务器端获得上传进度，并进行效果渲染。

效果图：

服务器端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。

以上这篇基于文件上传文件上传带进度条效果的实例（必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。