
概述一般上传文件时都需要进度条,本篇文章主要介绍了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条)