servlet jquery实现文件上传进度条示例代码

时间：2021-09-06 来源：互联网编辑：宝哥软件园浏览：次

现在文件的上传，特别是大文件上传，都需要进度条，让客户知道上传进度。

本文简单记录下如何弄进度条，以及一些上传信息，比如文件的大小，上传速度，预计剩余时间等一些相关信息。代码是匆忙下简单写的，一些验证没做，或代码存在一些隐患，不严谨的地方。本文代码只供参考。

进度条的样式多种多样，有些网站弄得非常绚烂漂亮。本文用户界面端不太懂，只会一些简单的基本的钢性铸铁而已，所以进度条弄得不好看。本文侧重的给读者提供一个参考，一个实现思路而已。

注：由于jQuery版本用的是2.1.1,所以如果跑本例子源码，请用IE9以上或火狐、谷歌浏览器测试。

接收文件上传的小型应用程序

上传文件服务器.爪哇

打包。费。servlet导入Java。io。ioexception导入Java。乌提尔。日期；导入Java。乌提尔。地图；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse导入com。费。乌提尔。文件上传实用程序；公共类上传文件服务器扩展了HttpServlet {私有静态最终长系列版本id=1L；public void DoGet(httprsvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException { this.doPost(请求，响应);} public void DoPost(httpersvletrequest请求，HttpServletResponse响应)引发ServletException，IOException { try { long start=system。currentimemillis()；System.out.println('开始上传文件..');映射字符串，字符串参数=文件上传。上传(请求);System.out.println('文件上传完成..');System.out.println('文件上次用时：’(系统。current itememills()-start)'毫秒');} catch(异常e){ e . print stack trace()；} } } 将上传文件进行下载到服务器的处理

FileUploadUtil.java

打包。费。util导入Java。io。文件；导入Java。乌提尔。HashMap导入Java。乌提尔。迭代器；导入Java。乌提尔。列表；导入Java。乌提尔。地图；导入javax。servlet。http。HttpServletrequest导入组织。阿帕奇。公地。文件上传。FileItem导入组织。阿帕奇。公地。文件上传。进度监听器；导入组织。阿帕奇。公地。文件上传。磁盘。disk fileitemfactory导入组织。阿帕奇。公地。文件上传。servlet。servlet文件上传；公共类FileUploadUtil { /** *文件上传保存路径*/私有静态最终字符串SAVE _ FILEPATH='/file upload/'；/** * 文件上传临时保存路径*/私有静态最终字符串SAVE _ FILE _ TMPPATH='/FILE upload/tmp/'；/** * 上传文件的最大值M */私有静态最终int MAX _ FILE _ SIZE=100 * 1024 * 1024；/** * 文件数据在内存中超过多少M后，就写入临时文件*/private static final int THRESHOLD _ SIZE=2 * 1024 * 1024；私有静态最终字符串编码=' UTF-8 '；/** * 处理文件上传的表单* 下载文件，并返回文件名称及普通表单域中其它属性值* 获取文件名*/公共静态映射字符串，字符串上传(HttpServletRequest请求)引发异常{ MapString，String params=new HashMapString，String()；字符串SavePath=请求。GetSession().getServletContext().文件分隔符；字符串SavePathTemp=请求。GetSession().getServletContext().文件分隔符；文件保存文件临时目录=新文件（保存路径临时);DiskFileItemFactory工厂=new DiskFileItemFactory()；//当内存中文件数据达到阈值_大小后，就写入临时文件中，避免上传大文件时，消化太多内存工厂。setsizethreshold(阈值_大小)；工厂。setrepository(saveFileTempDir)；servlet文件上传上传=新servlet文件上传(工厂);上传。setheaderencoding(ENCODING)；上传。setsizemax(MAX _ FILE _ SIZE)；file uploadinfo file uploadinfo=new file uploadinfo()；upload.setProgressListener(新文件上传侦听器（文件上传信息));request.getSession().setAttribute('uploadInfo '，文件uploadInfo)；列表项=upload.parseRequest(请求);迭代器ITER=项目。迭代器()；int FileNum=1；而(ITER。HasNeXt()){ file item item=(file item)ITER。NeXt()；if (item.isFormField()) {//普通表单域params.put(item.getFieldName()、item。getString())；} else { String FIlename=item。GetName().替换('/',' \ \ ');int I=文件名。的last index(' \ \ ')；文件名=文件名。子串(I ^ 1)；//避免重复fileName=系统。current Mellis()FIlename；文件上传文件=新文件（保存路径文件名);项目。写(上传的文件)；params.put('fileName0' fileNum，fileName)；fileNum } }返回参数；} }类文件上传监听器实现进度侦听器{ file uploadinfo file uploadinfo=null；公共文件上传侦听器（文件上传信息文件上传信息){这个。file uploadinfo=file uploadinfo} @覆盖公共void update(long uploadSize，long totalSize，int itemNum){ this。文件上传信息。settotalsize(TotalSize)；这个。文件上传信息。setuploadsize(uploadSize)；} } 上传文件的一些信息

FileUploadInfo.java

打包。费。util公共类文件uploadinfo { private final int K=1024；私有最终int M=K * 1024/** *总大小*/private long TotalSize；/** * 开始上传时间*/private long startTime=system。当前timemillis()；/** * 已上传多少*/private long uploadSize；/** * 上传速度(K/S)*/public double getUploadSpeed _ K(){长当前时间=系统。当前timemillis()；长时间使用时间=当前时间-开始时间；if(USedTiME==0.0){ return 0.0；}返回getUploadSize _ K()/使用时间* 1000d} /** * 获取已上传百分比* @ return */public double getUploadPercent(){ return(getUploadSize()* 1.00/gettotalize())* 100d；} /** * 剩余时间(s)* @ return */public double getRemainTime(){ double speedKB=getUploadSpeed _ K()；if(Speedkb=0.00){ return-1d；} return(gettotalize _ K()-getUploadSize _ K())/speedKB；} /** * 已上传时间* @ return */public double getUseTime(){ return(system。current timemillis()-start time)/1000d；} public long getTotalSize(){ return TotalSize；} public double gettotalize _ K(){ return gettotalize()* 1.0/K；} public double gettotalize _ M(){ return gettotalize()* 1.0/M；} public long getUploadSize(){ return uploadSize；}公共双getUploadSize _ K(){返回getUploadSize()/K；} public double getUploadSize _ M(){ return getUploadSize()/M；} public void setTotalSize(long TotalSize){ this。TotalSize=TotalSize} public void setUploadSize(long uploadSize){ this。uploadSize=uploadSize}私有字符串双2字符串(双d){返回字符串。格式(' %。2f’、d)；} public String toString(){ return " { 0 } " total size " : " double 2 String(getTotalSize _ M())" M "、" uploadSize " : " double 2 String(getUploadSize _ M())" M "、"上传速度" : " double 2 String(getupload speed _ K())" KB/s "、"上传优先级" 3360 " double 2 String(getupload percenter())"、""未知： double2字符串(getRemainTime()))s ' ' '，' useTime ' : ' ' double2字符串(getUseTime())' s ' ' } '；} } 读取文件上传进度的小型应用程序

UploadFileProgressServlet.java

打包。费。servlet导入Java。io。ioexception导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse导入com。费。乌提尔。文件uploadinfo公共类UploadFileProgressServlet扩展了httpersvlet { private static最终长串行版本id=1L；public void DoGet(httprsvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException { this.doPost(请求，响应);} public void doPost(HttpServletrequest请求，HttpServletResponse响应)引发ServletException，IOException { String响应内容=' '；Object obj=request.getSession().getAttribute(' uploadInfo ')；if(obj==null){响应内容=' { ' data ' : '无数据' } '；} else { file uploadInfo uploadInfo=(file uploadInfo)obj；响应内容=uploadinfo。tostring()；if(uploadinfo。getuploadpercent()==100.0){ request。getsession().setAttribute('uploadInfo '，null)；} } System.out.println('文件上次情况：' '响应内容)；response.getWriter().打印（响应内容);} } 前台页面upload2.html

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '/script src=' http : js/jquery-2。1 .1 .js ' type=' text/JavaScript '/script var false num=0；$(文档)。ready(function(){ $('#subbut ')).bind('click '，function(){ $('#fForm ')).submit()；var eventFun=function(){ $ .ajax({ type: 'GET '，URL : '/uploadtest/uploadfilepgressservlet。do '、data: {}、dataType: 'text '、success :函数(resData){//如果10次都失败，那就不要继续访问了if(FastNum 10){ window。ClearInterval(IntiD)；返回；} var obj=eval('(' resData ')')；如果。data==' NoData '){ FastNum；返回；} $('#graphbox ').css('display '，' block ')；$('.进度条').css('width '，obj。uploadprecent“%”)；$('#uploadPer ').html(obj。uploadprecent " %$('#progressInfo ').html(")总大小：' obj.totalSize '，速度：' obj.uploadSpeed '%，剩余时间：' obj.remainTime '，已用时间：' obj。usetime)；如果。uploadprecent==100){ window。clear interval(Intid)；$('#progressInfo ').html(")上传成功!');} }});};var intId=窗口。setinterval(活动乐趣，500)；});});/script style # graph box { border :1 px solid # e7e 7e 7；padding:5px宽度宽度：350像素背景-颜色： # f8f8余量：5 px 0；display:none}。图表{位置：相对背景-颜色： # F0EFEFborder:1px固体# ccccccpadd :2 pxfont-size :10 px；字体粗细：500；} .图表进度条{位置：相对；向右文本对齐：color: # ffffffheight:10px线高：10 pxfont-family : arial显示：块；} .图表进度条{背景色： # 66cc 33}/style/head body form id=' fForm ' class=' form-actions form-horizontal ' action='/upload test/uploadfileservlet。do ' EntType=' multipart/form-data ' target=' upload f ' method=' post ' div class=' control-group ' label class=' control-label '上传文件：/label div class='controls '输入类型=“文件”名称=“文件”样式='width:350px'/br输入类型=“文件”名称='文件2 '样式='width:350px'/br按钮类型=' button ' id=' subbutt ' class=' BTN '上传/button/div div id=' graph box ' div class=' graph ' span class='进度条' style=' width :0%；'span id=' upload per '/span/span/div/div id=' progressInfo '/div/div/form iframe name=' upload ef ' style=' display : none '/iframe/body/html将项目部署到雄猫（或其他网容器),访问http://172 .16 .126 .128:8080/上传测试/上传2。超文本标记语言

效果：