当前位置 主页 > 服务器问题 > Linux/apache问题 >
本文实例讲述了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>
