使用 new XMLHttpRequest() 制作下载文件进度条

Posted 2020-10-09 礼拜16

mui 进度控件使用方法：

检查当前容器(container控件)自身是否包含.mui-progressbar类：

• 当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；
• 否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；
• 若当前容器的直接孩子节点，均不含.mui-progressbar类,则自动创建进度条控件；

如果有多个列表，每个列表在点击下载控件时，必须要先清除上一个列表的进度条显示效果，因此，需要在点击列表时，就要做清除进度条的事件：

//点击下载 
jQuery(‘#downloadWarp‘).on(‘tap‘,‘li‘,function(e){ 
　　e.stopPropagation(); 
   //判断当前列表是否含有 .mui-progressbar 这个进度条的控件，如果有，则必须删除这个控件的类名 
   var isProgress = jQuery(‘#downloadNav‘).find(‘.mui-progressbar‘); 
   if(isProgress.hasClass(‘mui-progressbar‘)){ 
　　　　isProgress.removeClass(‘mui-progressbar‘); 
　　} 
　　//点击列表时，要把当前列表的name及url作为属性添加到download这个html节点上，方便下载时使用 
   var downloadUrl = jQuery(this).attr(‘data-url‘); 
   var downloadName = jQuery(this).attr(‘data-name‘); 
   jQuery(‘#downloadNav‘).find(‘ul>li>span.file-name‘).text(downloadName); 
   jQuery(‘#downloadNav‘).find(‘ul>li.download-url‘).attr(‘data-url‘,downloadUrl); 
   //弹出框的切换动画 
   mui(‘#downloadNav‘).popover(‘toggle‘); 
});

点击download，激活显示进度条的方法。文件下载，需要根据 XMLHttpRequest （初始化构造函数，它是一个客户端API，是为客户端与服务器之间提供一个传输服务的功能，详情请点击：http://www.jianshu.com/p/22f8...）中的event来判断正在下载数据，总下载数据，是否下载成功等来制作进度条，它的参数为

//总的下载数据 
event.loaded 
//正在下载的数据 
event.currentTarget.responseURL 
//通过它是否为空来判断文件是否下载成功 
event.timeStamp 
//下载文件所需的时间

向服务发送一个HTTP请求

xhr.open(‘GET‘, ‘example.php‘); 
xhr.send();

View Code

查询进度信息，需要用到 progress 事件，progress的回调函数为：

function updateProgress(event) { 
    if (event.lengthComputable) {
         var percentComplete = event.loaded / event.total;
 } }    

View Code

上面的代码中，event.total 是需要传输的总字节，event.loaded 是已经传输的字节。如果event.lengthComputable 不为真，则 event.total 等于0。只有 event.lengthComputable 为真的情况下，才会有进度条信息。

//显示进度条 
var spanOK = jQuery(‘<span></span>‘); 
jQuery(‘#downloadNav‘).find(‘.download-url‘).on(‘tap‘,function(){ 

//获取下载文件的url 
var url = jQuery(this).attr(‘data-url‘); 
//初始化传输服务 
var xhr = new XMLHttpRequest(); 
//请求数据的方法，调用open()打开这个url 
xhr.open(‘GET‘,url); 
//初始化传输服务，每个xhr的传输都是以 onprogress 的事件开始的 
xhr.onprogress = function (event) { 
　　//只有 e.lengthComputable 为真，才会有进度条的信息 
　　if (event.lengthComputable) { 
　　　　var total = event.total; 
　　　　var loaded = event.loaded; 
　　　　var isUrl = event.currentTarget.responseURL; 
　　　　var timeStamp = event.timeStamp; 
　　　　// percentComplete 为加载时数据 / 总数据，为一个小于1的值 
　　　　var percentComplete = event.loaded / event.total; 
　　　　// 判断如果请求的文件url为空，则要提示一个下载失败的错误信息 
　　　　if(isUrl == ‘‘ || isUrl == null){ 
　　　　　　mui.toast(‘File download failed, please try again!‘) 
　　　　} 
　　　　// 获取进度条的位置 
　　　　var container = mui(‘#downloadNav .progress‘); 
　　　　//进度条值，根据这个值来显示进度条，因为percentComplete为一个小于1的小数，而进度条是一个100的值，因此将动态的percentComplete*100取整 
　　　　var progress = parseInt(percentComplete * 100); 
　　　　// 下载文件所需的时间 var time = (new Date(timeStamp)).getTime(); 
　　　　// 进度条的值更换变量，为重新定义，可以累加，根据这个累加的值可以看到一个累加显示的进度条 
　　　　var progressNum = progress++; 
　　　　// 初始化进度条的值，progress的值 1，进度条显示 
　　　　if (container.progressbar({ progress: 1 }).show()) {
　　　　　　 // 给进度条设置进度值 
　　　　　　container.progressbar().setProgress(progressNum); 
　　　　} 
　　　　var spanOkWarp = jQuery(‘#downloadNav‘).find(‘ul span.file-name‘); 
　　　　// 判断当前进度条是否含有 mui-progressbar 控件，如果有，则给这个控件设置进度值 
　　　　var isProgress = jQuery(‘#downloadNav‘).find(‘.mui-progressbar‘); 
　　　　if(isProgress.hasClass(‘mui-progressbar‘)){ 
　　　　　　container.progressbar().setProgress(progressNum); 
　　　　} 
　　　　//进度加载之后，在另一个页面打开这个下载好的url 
　　　　setTimeout(function(){ 
　　　　　　mui.openWindow({ 
　　　　　　　　url:url 
　　　　　　}); 
　　},time+500); } }; 
　　// 发送这个请求 
　　xhr.send(); 
});

详细参考链接：你不知道的 XMLHttpRequest，来自简书