AspUpload实时上传进度的AJAX方法
函数名:UploadingProgress
参数列表:
Container:必须,bootstrap进度条的容器,就是进度条显示的位置。
PID:必须,用于查询上传进度;
callBack:可选,上传成功时的回调函数。
方法:
Request()方法:实例化后,调用此方法才能开始实时刷新进度条,该方法可接受一个参数,用于显示实时的上传速度、进度等信息。
Finished()方法:此方法提供三个参数,一个用于显示上传完成的消息的容器和消息内容,可选第三个参数,可为callBack函数提供一个参数。
Stop()和Failed()方法:手动停止上传和上传失败。
//显示文件上传进度
/** Container,必须,显示进度条的容器,bootstrap进度条progress样式。* ASPUpload用来查询上传进度的PID* callBack上传成功后的回调函数* 上传完成是通过Finish方法实现的,可以在该方法的第三个参数传入一个数值供callBack调用* 调用Request方法开始刷新上传进度,可以给该方法提供一个容器,用来显示实时的上传速度、百分比、剩余时间等信息。*/
function UploadingProgress(Container, PID, callBack){//创建AJAX对象this.getXMLObject = function(){var xmlHttp = null;try {// Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest();}catch(e) {// Internet Explorer try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}var Zero = 0;var Max = 0;var TimeoutID = "";var xmlHttp = this.getXMLObject();var that = this;$(Container).html('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%;"></div></div>');/*请求查询上传进度*/this.Request = function(TV){xmlHttp.open('POST', '/IP/Uploading/state/?PID=' + PID, true);xmlHttp.onreadystatechange = function() {if (!!xmlHttp && xmlHttp.readyState == 4 && xmlHttp.status == 200) {if( xmlHttp.responseText == "" ) {that.Finished(TV, "上传完成");//Max = 100;/*只有在上传完毕后的一瞬间,查询的responseText才为空,所以查询是否完成,只能靠执行页面的结果来判断。*/}else {var Xml = xmlHttp.responseXML;var state = {};state.PercentComplete = Xml.getElementsByTagName('PercentComplete')[0].firstChild.nodeValue;state.RemainingTime = Xml.getElementsByTagName('RemainingTime')[0].firstChild.nodeValue;state.TransferSpeed = Xml.getElementsByTagName('TransferSpeed')[0].firstChild.nodeValue;state.TotalBytes = Xml.getElementsByTagName('TotalBytes')[0].firstChild.nodeValue;state.UploadedBytes = Xml.getElementsByTagName('UploadedBytes')[0].firstChild.nodeValue;/* 若查询到的TotalBytes值为0,则使Zero增加1,最多查询10次,判断查询上传进度超时 */if(Zero < 11) {if(state.TotalBytes=="0"){if(Max>0){/*如果之前查询到上传进度,判断为上传完成*/that.Finished(TV, "上传完成");}else{Zero++;TimeoutID = setTimeout(function(){that.Request(TV);}, 500);}}else{if(parseInt(state.PercentComplete)>Max){Max = parseInt(state.PercentComplete);}$("div.progress div.progress-bar").css("width", state.PercentComplete+"%");if(!!TV){$(TV).find(".PercentComplete").text(state.PercentComplete+"%");$(TV).find(".TransferSpeed").text(state.TransferSpeed+"/S");$(TV).find(".RemainingTime").text(state.RemainingTime);$(TV).find(".TotalBytes").text(state.TotalBytes);$(TV).find(".UploadedBytes").text(state.UploadedBytes);}TimeoutID = setTimeout(function(){that.Request(TV);}, 500);}}else{clearTimeout(TimeoutID);that.Failed("查询上传状态超时");}}}}xmlHttp.send(null);}/*上传成功*/this.Success = function(){}/*上传完成*/this.Finished = function(TV, msg, exData){xmlHttp = null;clearTimeout(TimeoutID);$(TV).html(msg);$("div.progress div.progress-bar").css("width", "100%");if(typeof callBack=='function'){setTimeout(function(){callBack(exData)}, 2000);}}/*停止上传*/this.Stop = function(){xmlHttp = null;if(navigator.appName == "Microsoft Internet Explorer") {document.execCommand('Stop');} else { window.stop();}clearTimeout(TimeoutID);}/*上传失败*/this.Failed = function(TV, msg){xmlHttp = null;clearTimeout(TimeoutID);$(TV).html(msg);//if(typeof callBack=='function'){setTimeout(callBack, 2000);}}
}
AspUpload实时上传进度的AJAX方法相关推荐
- php上传完没进度条_php使用APC实现实时上传进度条功能
这篇文章主要介绍了php使用APC实现实时上传进度条功能,php本身不具备可以带有实时上传进度条功能,但是php提供了一个apc,它可以与php配置实现上传进度条,感兴趣的小伙伴们可以参考一下 php ...
- html ajax 上传进度条,ajax文件上传 带 进度条
HTML5 file 在选择上传文件的时候,根据需要可限制指定的文件类型(默认任意类型 ).在 input type="file" 加上 accept="指定要上传的文件 ...
- jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
- java 上传 进度,关于 javaweb的文件上传实时显示进度
方法:使用单例保存实时信息.具体的实现方法就是,当用户点击了处理按钮时,在后台开启一个线程进行处理,并且每进行到一步,就向单例中写入当前状态信息.然后编写一个servlet,用于返回单例中的信息,前台 ...
- Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度
====================================================== 注:本文源代码点此下载 ================================= ...
- vue获取上传进度_文件上传与读取实时进度展示-demo(Vue)
监听进程的方法onprogress 1 )文件读取的progress事件属于FileReader对象. 2 )下载的progress事件属于XMLHttpRequest对象. 3 )上传的progre ...
- canvas使用Ajax上传图片PHP,使用ajax上传图片,并且使用canvas实现出上传进度效果...
前端代码: 使用ajax上传图片,并使用canvas实现出上传进度效果 #myImg { border: 1px solid gray; border-radius: 8px; position: a ...
- html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下 原本打 ...
- 文件实时上传至云服务器的方法,文件实时上传至云服务器的方法
文件实时上传至云服务器的方法 内容精选 换一换 裸金属服务器安装Agent后,裸金属实例出现在云监控服务管理控制台的"主机监控 > 弹性云服务器"列表中.主机监控Agent根 ...
- ajax 上传文件 监听上传进度
ajax 上传,监听显示上传进度,前端代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
最新文章
- PIXI 下落文字消除(3)
- 【青少年编程】【蓝桥杯】绘制莲花图形
- linux查找技巧: find grep xargs linux系统信息查看大全
- Linux升级OpenSSH完整手册
- 程序员水平分级 你属于哪一类?
- electron调试html,electron桌面应用程序开发入门
- 四、纤维素纤维使用P-N系阻燃剂协同作用的原理?
- matlab程序复制出现乱码,matlab程序复制到Word文档里变成乱码,该如何改?
- 交换机基础原理,冲突域和广播域
- go的目录结构pkg
- ElasticSearch(狂神说笔记)
- Android自定义控件入门到精通--Region区域
- PHP多文字,二维码(动态、非动态)生成海报方式
- 时钟周期 主频 CPU执行时间
- mbrfix修复拒绝访问_拒绝错误修复的一些正确原因
- 揭开C/C++中数组形参的迷雾楔子
- c语言中int(2byte)的表示范围是为什么是-32768~32767!
- 695岛屿的最大面积
- html文档打印乱码怎么解决,如何解决Word文档打印后乱码的问题
- 手把手教你如何找到属于你自己的阿里云镜像加速器