JS代码

var xhr = new XMLHttpRequest();xhr.open("get", '***Controller/****.do', true);xhr.addEventListener("progress", function (evt) {if (evt.lengthComputable) {var loaded = parseInt((evt.loaded*100)/evt.total)+"%";$('#pros',window.parent.document).width(loaded);$('#pros',window.parent.document).text(loaded);if(loaded=='100%'){$("#initDeathButton",window.parent.document).attr("disabled",false);}}}, false);parent.art.dialog({id:'artDialogTop',lock:true,title:'初始化进度信息',content: '<div class="progress" style="width: 400px;height:20px;">'+'<div id="pros" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">'+'<span class="sr-only"></span>'+'</div></div>' +'<center> '+' <button  disabled id="initDeathButton" class="btn btn-info btn-round" οnclick="closeDialog();">' +'                <i class="glyphicon  "></i>确认' +'            </button></center>',
//                ok: function () {//
//                },init:function(event,ui){$(".aui_close",window.parent.document).hide();},close: function () {}});xhr.send();

后台代码

 @RequestMapping("/***")@ResponseBodypublic JsonData initDeathCode(HttpServletResponse response,HttpServletRequest request) throws Exception {JsonData json = new JsonData();try {ObsoletesOfPoultry o=new ObsoletesOfPoultry();List<ObsoletesOfPoultry> olist=   this.***Service.selectList(o);response.setHeader("Content-Length",olist.size()+""); //进度条总长度int a=0;for(ObsoletesOfPoultry po:olist){ //循环所有单据a++;//逻辑处理……//逻辑处理response.getOutputStream().write(a);response.getOutputStream().flush();***Service.update(po);}json.setSuccess(true);json.setMsg("初始化成功！");} catch (Exception e) {e.printStackTrace();json.setSuccess(false);json.setMsg("初始化失败！");}finally {response.getOutputStream().close();}return json;}

基于XMLHttpRequest的进度条相关推荐

springboot：实现文件上传下载实时进度条功能【附带源码】
0. 引言记得刚入行的时候,做了一个文件上传的功能,因为上传时间较久,为了用户友好性,想要添加一个实时进度条,显示进度.奈何当时技术有限,查了许久也没用找到解决方案,最后不了了之. 近来偶然想到这个 ...
GDAL算法进度条使用说明
在调用GDAL算法的时候,希望能够显示其处理进度信息,其实在GDAL的算法API中,一般最后两个参数就是进度信息的指针.下面分别实现两种进度条信息,一种是在控制台中的进度条,一种是基于QT界面的进度条 ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
基于Blod的ajax进度条下载实现
普通的浏览器下载在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <atarget="_blank"href ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
基于Vue的事件响应式进度条组件
写在前面找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容 ...
android魅族进度条,魅族基于安卓 10 的首个 Flyme 内测版已推送：16s Pro/16s 尝鲜，可强制开启 90Hz 刷新率...
7 月 21 日消息据魅族 Flyme 官微消息,基于 Android 10 的 Flyme 首个内测版本已推送. 魅族官方称,本次推送机型为 16s Pro.16s,16th Plus.16th ...
基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
基于CAShapeLayer和贝塞尔曲线的圆形进度条动画
通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer 1,CAShapeLayer继承自CALayer,可使用CALayer的所有属 ...

基于XMLHttpRequest的进度条

JS代码

后台代码

基于XMLHttpRequest的进度条相关推荐

最新文章

热门文章