springboot带有进度条的上传功能完整实例
163 浏览量
2020-08-25
11:03:04
上传
评论 1
收藏 132KB PDF 举报
springboot带有进度条的上传功能完整实例带有进度条的上传功能完整实例
主要介绍了springboot带有进度条的上传功能,结合完整实例形式分析了springboot带进度条上传的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了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 id="time"></span>
<div class="row">
<input class="btn btn-info btn-xs" type="file" name="file" /><br />
<div class="col-lg-5"
style="padding-left: 0; padding-right: 0; margin-bottom: 0px;">
<div class="progress progress-striped active" style="display: ">
<div id="progressBar" class="progress-bar progress-bar-success"
role="progressbar" aria-valuemin="0" aria-valuenow="0"
aria-valuemax="100" style="width: 20%"></div>
</div>
</div>
<!-- 显示上传速度 -->
<div id="showInfo" class="col-lg-2">0KB/s</div>
</div>
<!-- 显示文件信息 -->
<div id="showFieInfo" 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)
+ '%';
资源评论
weixin_38737366
- 粉丝: 5
- 资源: 950
