本文实例讲述了springboot带有进度条的上传功能。分享给大家供大家参考，具体如下：
一、说明
最近要做文件上传，在网上找了很久都没有一个全面的示例，特此记录下来分享给大家。
1.文件上传接口可按照springboot默认实现，也可用commons-fileupload组件，本示例使用springboot默认文件上传 2.最后也有commons-fileupload组件接口示例
2.重点在前端JS实现（也可以使用ajax上传），参考了网上大量上传文件显示进度条博客以及技术方案，在此做了一个统一的总结，方便后续使用
3.这仅仅是一个示例，大家可根据实际需要改进。
二、前端代码
<!DOCTYPE html><html><meta charset="UTF-8" /><head><title>文件上传</title><link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css" rel="external nofollow" rel="stylesheet"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script></head><body class="container"> <br /> <span ></span> <div class="row"> <input class="btn btn-info btn-xs" type="file" name="file" /><br /> <div class="col-lg-5" > <div class="progress progress-striped active" > <div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" ></div> </div> </div> <!-- 显示上传速度 --> <div class="col-lg-2">0KB/s</div> </div> <!-- 显示文件信息 --> <div class="row"> <label name="upfileName"></label><br /> <label name="upfileSize"></label><br /> <label name="upfileType"></label><br /> </div> <div class="row"> <input class="btn btn-success btn-xs" type="button" name="upload" value="上传" /> <input class="btn btn-success btn-xs" type="button" name="cancelUpload" value="取消" /> </div></body><script type="text/javascript"> 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(); }</script></html>
新闻热点
疑难解答
