Spring Boot+AngularJS+BootStrap实现进度条示例代码

Spring Boot+AngularJS+BootStrap实现进度条示例代码,第1张

概述一般上传文件时都需要进度条,本篇文章主要介绍了Spring Boot+AngularJS+BootStrap实现进度条示例代码,有兴趣的可以了解一下。

Spring Boot+AngularJs+bootstrap实现进度条

原理

进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值。然后前台再每隔很小的一段时间去请求这个值。

在AngularJs中,$http对象有3种状态,分别是success,progress,error,其中progress方法就会在success方法调用之前(也就是上传完成之前),不断地调用。而我们要做的就是在progress中在添加一个请求,去后台拿我们设置在session中的值。

代码,这里我用了一个插件用来上传文件,叫ng-file-upload

HTML

<uib-progress data-ng-show="progress">
<uib-bar value="progress" type="{{type}}" data-ng-bind="progress + '%'"/>

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-08
下一篇2022-06-08

发表评论

登录后才能评论

评论列表(0条)

    保存