Ajax - 下载前获取文件大小

时间:2013-07-02 01:58:20

标签: javascript ajax http-headers filesize

基本上,我想知道是否应该使用AJAX下载文件,具体取决于文件大小的大小。

我想这个问题也可以改为:我如何只得到ajax请求的标题?


编辑ultima-rat0在评论中告诉我两个已经被问到的问题显然与此问题相同。它们非常相似,但它们都需要jQuery。我想要一个非jQuery解决方案。

4 个答案:

答案 0 :(得分:23)

您可以手动获取XHR响应标头数据:

http://www.w3.org/TR/XMLHttpRequest/#the-getresponseheader()-method

此函数将获取所请求URL的文件大小:

function get_filesize(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("HEAD", url, true); // Notice "HEAD" instead of "GET",
                                 //  to get only the header
    xhr.onreadystatechange = function() {
        if (this.readyState == this.DONE) {
            callback(parseInt(xhr.getResponseHeader("Content-Length")));
        }
    };
    xhr.send();
}

get_filesize("http://example.com/foo.exe", function(size) {
    alert("The size of foo.exe is: " + size + " bytes.");
});

答案 1 :(得分:2)

有时候HEAD可以采取与GET不同的行为,所以我建议这样的事情在获得Content-Length标题后中止请求:

new Promise(resolve => {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/a.bin', true);
    xhr.onreadystatechange = () => {
        resolve(+xhr.getResponseHeader("Content-Length"));
        xhr.abort();
    };
    xhr.send();
}).then(console.log);

答案 2 :(得分:1)

如果无法请求HEAD:

解决方案Ebrahim仅对我而言不适用于Firefox,因为上下文长度不可用于Firefox中的中止请求。因此,我使用了“进行中”事件而不是“ onreadystatechange”事件:

new Promise(
  (resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        resolve(event.total);
      } else {
        reject(new Error('No content-length available'));
      }
      xhr.abort();
    };
    xhr.send();
  }
);

答案 3 :(得分:0)

1)如果只需要标头,则由于始终有一个简单但不为人所知的细节,始终应优先使用“ HEAD”而不是“ GET”:即使您使用“ GET”并立即在readyState === 2时中止(如由其他答案提出的建议),您不仅已经收到了标头,而且已经收到了第一部分完整信息(标头+正文的一部分),这些信息的大小可能会有所不同,但通常,传输大小至少会不必要地翻倍。改为使用“ HEAD”,可以确保只传输标题。

2)Content-Length标头必须由“ Access-Control-Expose-Headers”公开才能在客户端访问。如果您正在处理多个原始资源,并且不确定是否已公开Content-Length,以防止发生异常,则可以在事件处理程序内检查这种情况(或其他多种方式):

let contentLength = null;

if (checkHeaders(e.target, ['*','Content-Length'])) {
    // YOU CAN ACCESS HEADER
    contentLength = parseInt(e.target.getResponseHeader("Content-Length"));
} else {
    // YOU CAN NOT ACCESS HEADER
    console.log('Content-Length NOT AVAILABLE');
}

function checkHeaders(request, headers) {
    return (headers.some(function (elem) {
        return (request.getResponseHeader("Access-Control-Expose-Headers").includes(elem));
    }));
}

3)应用任何类型的编码时(如某些注释中所建议的),都不禁止Content-Length标头。但是,请注意,Content-Length通常将是解码主体的大小(即使不是)。可以通过许多不同的方式来防止这种情况发生,但这是服务器端的考虑。