这篇文章将为大家详细讲解有关如何实现springboot带有进度条的上传功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网络空间、营销软件、网站建设、廊坊网站维护、网站推广。
具体如下：
一、说明
最近要做文件上传，在网上找了很久都没有一个全面的示例，特此记录下来分享给大家。
1.文件上传接口可按照springboot默认实现，也可用commons-fileupload组件，本示例使用springboot默认文件上传 2.最后也有commons-fileupload组件接口示例
2.重点在前端JS实现（也可以使用ajax上传），参考了网上大量上传文件显示进度条博客以及技术方案，在此做了一个统一的总结，方便后续使用
3.这仅仅是一个示例，大家可根据实际需要改进。
二、前端代码
文件上传 0KB/s var fileBtn = $("input[name=file]"); var processBar= $("#progressBar"); var uploadBtn=$("input[name=upload]"); var canelBtn=$("input[name=cancelUpload]"); var ot;//上传开始时间 var oloaded;//已上传文件大小 fileBtn.change(function() { var fileObj = fileBtn.get(0).files[0]; //js获取文件对象 if (fileObj) { var fileSize = 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(); }); function uploadFile(){ var url ="/to/upload"; var fileObj = fileBtn.get(0).files[0]; if(fileObj==null){ alert("请选择文件"); return; } // FormData 对象 var form = new FormData(); form.append('file', fileObj); // 文件对象 // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); //true为异步处理 xhr.open('post', url, true); //上传开始执行方法 xhr.onloadstart = function() { console.log('开始上传') ot = new Date().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); function progressFunction(evt) { debugger; if (evt.lengthComputable) { var completePercent = Math.round(evt.loaded / evt.total * 100) + '%'; processBar.width(completePercent); processBar.text(completePercent); var time = $("#time"); var nt = new Date().getTime(); //获取当前时间 var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s ot = new Date().getTime(); //重新赋值时间，用于下次计算 var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b oloaded = evt.loaded; //重新赋值已上传文件大小 //上传速度计算 var speed = perload/pertime;//单位b/s var bspeed = speed; var units = '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); //剩余时间 var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1); $("#showInfo").html(speed+units+'，剩余时间：'+resttime+'s'); } } //上传成功后回调 function uploadComplete(evt) { uploadBtn.attr('disabled', false); console.log('上传完成') }; //上传失败回调 function uploadFailed(evt) { console.log('上传失败' + evt.target.responseText); } //终止上传 function cancelUpload() { xhr.abort(); } //上传取消后回调 function uploadCanceled(evt) { console.log('上传取消,上传被用户取消或者浏览器断开连接:' + evt.target.responseText); } canelBtn.click(function(){ uploadBtn.attr('disabled', false); cancelUpload(); }) } function getSize(size) { var fileSize = '0KB'; if (size > 1024 * 1024) { fileSize = (Math.round(size / (1024 * 1024))).toString() + 'MB'; } else { fileSize = (Math.round(size / 1024)).toString() + 'KB'; } return fileSize; } function setProgress(w) { processBar.width(w + '%'); } function showProgress() { processBar.parent().show(); } function hideProgress() { processBar.parent().hide(); }
