Spring Boot+AngularJS+BootStrap实现进度条示例代码
发布时间:2020-12-15 01:54:29 所属栏目:大数据 来源:网络整理
导读:Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值。然后前台再每隔很小的一段时间去请求这个值。 在AngularJS中,$http对象有3种状态,分别是success,progress,erro
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 + '%'"/> js },function (){
//这里是error方法
},function (){
//这里是progress方法
$scope.type = "progress-bar progress-bar-info progress-bar-striped";
$http({
url:"",method: "get"
}).success(function (res) {
$scope.progress = res;//绑定进度条的值
})
});
上传部分代码(只需要关注设置session的地方 batchModify(InputStream inputStream,HttpSession session) {
Map
} 进度条部分代码,很简单,就是读Session中progress的值 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |