Ajax -下载前获取文件大小

Basically, I want to figure out whether I should download a file using AJAX, depending on how large the filesize is.

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

I guess this question could also be rephrased as: How do I get only the header of an ajax request?

我想这个问题也可以重新表述为:如何只获得ajax请求的头?

EDIT: ultima-rat0 in the comments told me of two questions that had already been asked that apparently are the same as this one. They are very similar, but they both want jQuery. I want a non-jQuery solution to this.

编辑:ultima-rat0在评论中告诉我两个问题已经被问过了，显然和这个问题是一样的。它们非常相似，但是它们都想要jQuery。我想要一个非jquery解决方案。

2 个解决方案

#1

You can get XHR response header data manually:

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

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

http://www.w3.org/TR/XMLHttpRequest/的getresponseheader()方法

This function will get the filesize of the requested URL:

此函数将获得所请求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.");
});

#2

Sometimes HEAD can act differently than GET so I suggest something like this that aborts the request after getting Content-Length header:

有时候HEAD的行为可能不同于GET，所以我建议类似这样的东西，在获得Content-Length header后中止请求:

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);

#1