springboot带有进度条的上传功能完整实例_分布式导入实现进度条

springboot

127 浏览量更新于2023-03-16 评论 1 收藏 132KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了springboot带有进度条的上传功能,结合完整实例形式分析了springboot带进度条上传的原理、实现步骤与相关操作技巧,需要的朋友可以参考下

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

一、说明一、说明

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

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

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

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

二、前端代码二、前端代码

<!DOCTYPE html>

<html>

<head>

rel="stylesheet">

</head>

<br />

<div class="col-lg-5"

style="padding-left: 0; padding-right: 0; margin-bottom: 0px;">

<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>

</div>

</body>

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)

+ '%';

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余6页未读，立即下载

weixin_38737366

粉丝: 5
资源: 950

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

前后台交互的实时进度条 支持多浏览器

springboot+websocket进度条实战

WebClient下载文件展示进度条

springboot文件上传进度条

springboot 文件上传进度条

vue+springboot s实时进度条

java springboot oss 断点上传 进度条

java+jquery写一个带有进度条的上传程序

springboot+vue实现进度条

java springboot oss 分片上传 进度条 全代码

用vfp编写一段带有进度条的音乐播放软件

文件批量上传带进度条，使用springboot

springboot+antdesign实现文件上传进度条

用python写一个带有tkinter的网页爬虫代码，带有进度条

springboot批量执行任务实时进度条

springboot,vue实现上传视频,播放视频功能

android 进度条控件实例

android开发，我想用VideoView写一个视频播放器，要带有进度条，并且视频播放完成后暂停，进度条归零

文本进度条实例编写，易错点

asp无组件上传带进度条

会员权益专享

最新资源

前后台交互的实时进度条支持多浏览器

java springboot oss 断点上传进度条

java springboot oss 分片上传进度条全代码