码迷,mamicode.com
首页 > Web开发 > 详细

js通过HEAD请求方式提前获取下载文件大小,XMLHttpRequest和ajax两种实例

时间:2020-01-13 13:10:16      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:option   首部   erro   request   get、post、   代码   pre   length   下载   

HTTP 中定义了 7 种请求方式:GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。

【GET:获取资源】【POST:传输实体文本】【HEAD:获得报文首部】【PUT:传输文件】【DELETE:删除文件】【OPTIONS:询问支持的方法】【TRACE:追踪路径】【CONNECT:要求用隧道协议连接代理】

下面我们使用HEAD方式来实现在下载文件前通过获得返回报文的头部来获取文件大小:

var url = ‘http://‘; //文件下载链接
var fileSize = 0; //下载文件大小    
var xhr = new XMLHttpRequest();
    xhr.open(‘HEAD‘, url, true);    // 也可用POST方式
    xhr.onreadystatechange = () => {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
         fileSize = xhr.getResponseHeader(‘Content-Length‘);
         console.log(fileSize)
       } else {
         alert(‘ERROR‘);
       }
     }
    };
    xhr.send()

 这种发放在业务逻辑中一般用来获取后台通过报文头部传递的参数,不只是来获取文件大小。

ajax方式的代码如下:

             $.ajax({
                url: item.m3u8Url,
                async: false,
                timeout: 2000,
                // type: ‘HEAD‘,
                complete: function( xhr,data ){
                  console.log(xhr.getResponseHeader("hls-next"));
                  hlsNext = Math.floor(xhr.getResponseHeader("hls-next")/1000)
                  console.log(‘hlsNext‘,hlsNext)
                }
              });

js通过HEAD请求方式提前获取下载文件大小,XMLHttpRequest和ajax两种实例

标签:option   首部   erro   request   get、post、   代码   pre   length   下载   

原文地址:https://www.cnblogs.com/toggle/p/12186533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!