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

Posted 礼拜16

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 new XMLHttpRequest() 制作下载文件进度条相关的知识,希望对你有一定的参考价值。

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,来自简书







































































以上是关于使用 new XMLHttpRequest() 制作下载文件进度条的主要内容,如果未能解决你的问题,请参考以下文章

封装一个XMLHttpRequest

XMLHttpRequest剖析

js实现获取两个日期之间筛选出指定周日制的方法

使用 XMLHttprequest 上传文件 - multipart/form-data 中缺少边界

使用formdata时如何在XMLHttpRequest中添加头数据?

基于XMLHttpRequest的ajax简介