好资源导航 » 文章资讯 » springboot带有进度条的上传功能完整实例

springboot带有进度条的上传功能完整实例

2023-08-09 23:00:04 80

本文实例讲述了springboot带有进度条的上传功能。分享给大家供大家参考，具体如下：

一、说明

最近要做文件上传，在网上找了很久都没有一个全面的示例，特此记录下来分享给大家。

1.文件上传接口可按照springboot默认实现，也可用commons-fileupload组件，本示例使用springboot默认文件上传2.最后也有commons-fileupload组件接口示例

2.重点在前端JS实现（也可以使用ajax上传），参考了网上大量上传文件显示进度条博客以及技术方案，在此做了一个统一的总结，方便后续使用

3.这仅仅是一个示例，大家可根据实际需要改进。

二、前端代码





文件上传

0KB/s

varfileBtn=$("input[name=file]"); varprocessBar=$("#progressBar"); varuploadBtn=$("input[name=upload]"); varcanelBtn=$("input[name=cancelUpload]"); varot;//上传开始时间 varoloaded;//已上传文件大小 fileBtn.change(function(){ varfileObj=fileBtn.get(0).files[0];//js获取文件对象 if(fileObj){ varfileSize=getSize(fileObj.size); $("label[name=upfileName]").text('文件名：'+fileObj.name); $("label[name=upfileSize]").text('文件大小：'+fileSize); $("label[name=upfileType]").text('文件类型：'+fileObj.type); uploadBtn.attr('disabled',false); } }); //上传文件按钮点击的时候 uploadBtn.click(function(){ //进度条归零 setProgress(0); //上传按钮禁用 $(this).attr('disabled',true); //进度条显示 showProgress(); //上传文件 uploadFile(); }); functionuploadFile(){ varurl="/to/upload"; varfileObj=fileBtn.get(0).files[0]; if(fileObj==null){ alert("请选择文件"); return; } //FormData对象 varform=newFormData(); form.append('file',fileObj);//文件对象 //XMLHttpRequest对象 varxhr=newXMLHttpRequest(); //true为异步处理 xhr.open('post',url,true); //上传开始执行方法 xhr.onloadstart=function(){ console.log('开始上传') ot=newDate().getTime();//设置上传开始时间 oloaded=0;//已上传的文件大小为0 }; xhr.upload.addEventListener('progress',progressFunction,false); xhr.addEventListener("load",uploadComplete,false); xhr.addEventListener("error",uploadFailed,false); xhr.addEventListener("abort",uploadCanceled,false); xhr.send(form); functionprogressFunction(evt){ debugger; if(evt.lengthComputable){ varcompletePercent=Math.round(evt.loaded/evt.total*100) +'%'; processBar.width(completePercent); processBar.text(completePercent); vartime=$("#time"); varnt=newDate().getTime();//获取当前时间 varpertime=(nt-ot)/1000;//计算出上次调用该方法时到现在的时间差，单位为s ot=newDate().getTime();//重新赋值时间，用于下次计算 varperload=evt.loaded-oloaded;//计算该分段上传的文件大小，单位b oloaded=evt.loaded;//重新赋值已上传文件大小 //上传速度计算 varspeed=perload/pertime;//单位b/s varbspeed=speed; varunits='b/s';//单位名称 if(speed/1024>1){ speed=speed/1024; units='k/s'; } if(speed/1024>1){ speed=speed/1024; units='M/s'; } speed=speed.toFixed(1); //剩余时间 varresttime=((evt.total-evt.loaded)/bspeed).toFixed(1); $("#showInfo").html(speed+units+'，剩余时间：'+resttime+'s'); } } //上传成功后回调 functionuploadComplete(evt){ uploadBtn.attr('disabled',false); console.log('上传完成') }; //上传失败回调 functionuploadFailed(evt){ console.log('上传失败'+evt.target.responseText); } //终止上传 functioncancelUpload(){ xhr.abort(); } //上传取消后回调 functionuploadCanceled(evt){ console.log('上传取消,上传被用户取消或者浏览器断开连接:'+evt.target.responseText); } canelBtn.click(function(){ uploadBtn.attr('disabled',false); cancelUpload(); }) } functiongetSize(size){ varfileSize='0KB'; if(size>1024*1024){ fileSize=(Math.round(size/(1024*1024))).toString()+'MB'; }else{ fileSize=(Math.round(size/1024)).toString()+'KB'; } returnfileSize; } functionsetProgress(w){ processBar.width(w+'%'); } functionshowProgress(){ processBar.parent().show(); } functionhideProgress(){ processBar.parent().hide(); }

效果：

三、对上传代码进行组件化封装

UploadCommon.js

/**
*上传文件公共组件
*
*@paramurl上传地址
*@paramprocessBar进度条jquery获取的页面组件
*@paramspeedLab显示上传速度Labeljquery获取的页面组件
*@paramuploadBtn上传按钮jquery获取的页面组件
*@paramcancelBtn取消上传按钮jquery获取的页面组件
*@paramcallBack上传完成回调函数上传完成后的回调函数，可以不传
*@author
*@returns
*/
functionUploadCommon(url,processBar,speedLab,uploadBtn,cancelBtn,callBack){
functioninit(){
//每次回调监测上传开始时间
varstartTime=null
//已上传文件大小
varoloaded=null
varxhr=newXMLHttpRequest()
functionsetProgress(w){
processBar.width(w+'%');
processBar.text(w+'%');
}
functionprogressMonitor(evt){
if(evt.lengthComputable){
varcompletePercent=Math.round(evt.loaded/evt.total*100)
setProgress(completePercent)
varnowTime=newDate().getTime()
//计算出上次调用该方法时到现在的时间差，单位为s
varpertime=(nowTime-startTime)/1000
//重新赋值时间，用于下次计算
startTime=newDate().getTime()
//计算该分段上传的文件大小，单位b
varperload=evt.loaded-oloaded
//重新赋值已上传文件大小，用以下次计算
oloaded=evt.loaded
//上传速度计算,单位b/s
varspeed=perload/pertime
varbspeed=speed
//单位名称
varunits='bit/s'if(speed/1024>1){
speed=speed/1024
units='Kb/s'
}
if(speed/1024>1){
speed=speed/1024
units='Mb/s'
}
speed=speed.toFixed(1);
//剩余时间
varresttime=((evt.total-evt.loaded)/bspeed).toFixed(1)
speedLab.html(speed+units+'，剩余时间：'+resttime+'s')
}
}
//上传成功后回调
functionuploadComplete(evt){
uploadBtn.attr('disabled',false)
varstatus=evt.currentTarget.status
if(status==401){
alert('请登录后再上传')
return
}
if(status==403){
alert('无权限操作')
return
}
if(status!=200){
alert('上传异常，错误码'+status)
return
}
varresponse=JSON.parse(evt.currentTarget.response)
if(response.code!='200'){
alert('上传处理异常'+response.msg)
return
}
console.log('上传成功')
if(callBack!=null&&typeofcallBack!='undefined'){
callBack()
}
};
//上传失败回调
functionuploadFailed(evt){
alert('上传处理失败'+evt.target.responseText)
}
//终止上传
functioncancelUpload(){
xhr.abort()
}
//上传取消后回调
functionuploadCanceled(evt){
alert('文件上传已终止:'+evt.target.responseText)
}
//添加取消上传事件
cancelBtn.click(function(){
uploadBtn.attr('disabled',false)
cancelUpload();
})
this.uploadFile=function(formData){
//上传按钮禁用
uploadBtn.attr('disabled',true);
setProgress(0)
//true为异步处理
xhr.open('post',url,true)
//上传开始执行方法
xhr.onloadstart=function(){
console.log('开始上传')
//设置上传开始时间
startTime=newDate().getTime()
//已上传的文件大小为0
oloaded=0
}
xhr.upload.addEventListener('progress',progressMonitor,false)
xhr.addEventListener("load",uploadComplete,false)
xhr.addEventListener("error",uploadFailed,false)
xhr.addEventListener("abort",uploadCanceled,false)
xhr.send(formData);
}
this.setProgressValue=function(w){
processBar.width(w+'%')
processBar.text(w+'%')
}
}
returnnewinit()
}

调用

$(document).ready(function(){
varaddVersionBtn=$('#addVersionBtn')//

四,服务端接口

1.springboot默认实现

pom.xml


4.0.0
com.demo
demo
0.0.1-SNAPSHOT

org.springframework.boot
spring-boot-starter-parent
1.5.10.RELEASE



UTF-8
UTF-8
1.8



org.springframework.boot
spring-boot-devtools
true


org.springframework.boot
spring-boot-starter-web


org.springframework.boot
spring-boot-starter-thymeleaf


net.sourceforge.nekohtml
nekohtml


org.springframework.boot
spring-boot-starter-test
test



io.springfox
springfox-swagger2
2.7.0


io.springfox
springfox-swagger-ui
2.7.0






org.springframework.boot
spring-boot-maven-plugin

application.yml

server:
port:8080
tomcat:
uri-encoding:UTF-8
application:
name:demo
thymeleaf:
encoding:UTF-8
cache:true
mode:LEGACYHTML5
devtools:
restart:
enabled:true
http:
multipart:
maxFileSize:500Mb
maxRequestSize:500Mb
location:D:/tmp
debug:false

接口：

@PostMapping("/upload")
publicStringuploadFile(@RequestParam("file")MultipartFilefile){
if(file==null||file.isEmpty()){
return"fileisempty";
}
//获取文件名
StringfileName=file.getOriginalFilename();
//文件存储路径
StringfilePath="D:/data/"+UUID.randomUUID().toString().replaceAll("-","")+"_"+fileName;
logger.info("savefileto:"+filePath);
Filedest=newFile(filePath);
if(!dest.getParentFile().exists()){
dest.getParentFile().mkdirs();
}
try{
file.transferTo(dest);
return"success";
}catch(Exceptione){
e.printStackTrace();
}
return"fail";
}

启动类

importorg.springframework.boot.SpringApplication;
importorg.springframework.boot.autoconfigure.SpringBootApplication;
importorg.springframework.boot.builder.SpringApplicationBuilder;
importorg.springframework.boot.web.support.SpringBootServletInitializer;
importorg.springframework.transaction.annotation.EnableTransactionManagement;
@SpringBootApplication
@EnableTransactionManagement
publicclassApplicationextendsSpringBootServletInitializer{
@Override
protectedSpringApplicationBuilderconfigure(SpringApplicationBuilderapplication){
returnapplication.sources(Application.class);
}
publicstaticvoidmain(String[]args){
SpringApplication.run(Application.class,args);
}
}

2.使用commons-fileupload上传组件

application.yml

server:
port:8080
tomcat:
uri-encoding:UTF-8
spring:
application:
name:svc-demo
thymeleaf:
encoding:UTF-8
cache:false
mode:LEGACYHTML5
debug:false

pom.xml


org.springframework.boot
spring-boot-starter-parent
1.5.10.RELEASE



UTF-8
UTF-8
1.8



org.springframework.boot
spring-boot-devtools
true


org.springframework.boot
spring-boot-starter-web


org.springframework.boot
spring-boot-starter-thymeleaf


org.springframework.boot
spring-boot-starter-test
test



commons-io
commons-io
2.4


commons-fileupload
commons-fileupload
1.3.1



net.sourceforge.nekohtml
nekohtml





org.springframework.boot
spring-boot-maven-plugin

进程类

publicclassProgress{
privatelongbytesRead;//已读取文件的比特数
privatelongcontentLength;//文件总比特数
privatelongitems;//正读的第几个文件
publiclonggetBytesRead(){
returnbytesRead;
}
publicvoidsetBytesRead(longbytesRead){
this.bytesRead=bytesRead;
}
publiclonggetContentLength(){
returncontentLength;
}
publicvoidsetContentLength(longcontentLength){
this.contentLength=contentLength;
}
publiclonggetItems(){
returnitems;
}
publicvoidsetItems(longitems)\{
this.items=items;
}
}

监听类

@Component
publicclassFileUploadProgressListenerimplementsProgressListener{
privateHttpSessionsession;
publicvoidsetSession(HttpSessionsession){
this.session=session;
Progressstatus=newProgress();//保存上传状态
session.setAttribute("status",status);
}
@Override
publicvoidupdate(longbytesRead,longcontentLength,intitems){
Progressstatus=(Progress)session.getAttribute("status");
status.setBytesRead(bytesRead);
status.setContentLength(contentLength);
status.setItems(items);
}
}

文件上传处理类

publicclassCustomMultipartResolverextendsCommonsMultipartResolver{
//注入第二步写的FileUploadProgressListener
@Autowired
privateFileUploadProgressListenerprogressListener;
publicvoidsetFileUploadProgressListener(FileUploadProgressListenerprogressListener){
this.progressListener=progressListener;
}
@Override
publicMultipartParsingResultparseRequest(HttpServletRequestrequest)throwsMultipartException{
Stringencoding=determineEncoding(request);
FileUploadfileUpload=prepareFileUpload(encoding);
//fileUpload.setFileSizeMax(1024*1024*500);//单个文件最大500M
//fileUpload.setSizeMax(1024*1024*500);//一次提交总文件最大500M
progressListener.setSession(request.getSession());//问文件上传进度监听器设置session用于存储上传进度
fileUpload.setProgressListener(progressListener);//将文件上传进度监听器加入到fileUpload中
try{
ListfileItems=((ServletFileUpload)fileUpload).parseRequest(request);
returnparseFileItems(fileItems,encoding);
}catch(FileUploadBase.SizeLimitExceededExceptionex){
thrownewMaxUploadSizeExceededException(fileUpload.getSizeMax(),ex);
}catch(FileUploadExceptionex){
thrownewMultipartException("Couldnotparsemultipartservletrequest",ex);
}
}
}

控制器

@RestController
publicclassFileController{
@PostMapping("/upload")
publicStringuploadFile(@RequestParam("file")MultipartFilefile){
if(file.isEmpty()){
return"文件为空";
}
//获取文件名
StringfileName=file.getOriginalFilename();//文件上传后的路径
//文件上传后的路径
StringfilePath=null;
try{
filePath=newFile("").getCanonicalPath()+"/tmp/uploadFile/";
}catch(IOExceptione){
e.printStackTrace();
}
//存储路径
StringtagFilePath=filePath+CommonUtil.getCurrentTime()+fileName;
Filedest=newFile(tagFilePath);
//检测是否存在目录
if(!dest.getParentFile().exists()){
dest.getParentFile().mkdirs();
}
try{
file.transferTo(dest);
}catch(IllegalStateExceptione){
e.printStackTrace();
}catch(IOExceptione){
e.printStackTrace();
}
returnfileName+"上传失败";
}
}

启动类

//注意取消自动Multipart配置，否则可能在上传接口中拿不到file的值
@EnableAutoConfiguration(exclude={MultipartAutoConfiguration.class})
@SpringBootApplication
publicclassApplicationextendsSpringBootServletInitializer{
//注入自定义的文件上传处理类
@Bean(name="multipartResolver")
publicMultipartResolvermultipartResolver(){
CustomMultipartResolvercustomMultipartResolver=newCustomMultipartResolver();
returncustomMultipartResolver;
}
@Override
protectedSpringApplicationBuilderconfigure(SpringApplicationBuilderapplication){
returnapplication.sources(Application.class);
}
publicstaticvoidmain(String[]args){
SpringApplication.run(Application.class,args);
}

更多关于java相关内容感兴趣的读者可查看本站专题：《Spring框架入门与进阶教程》、《Java数据结构与算法教程》、《Java操作DOM节点技巧总结》、《Java文件与目录操作技巧汇总》和《Java缓存操作技巧汇总》

希望本文所述对大家java程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

springboot带有进度条的上传功能完整实例

热门推荐

随机推荐