Ajax - 在下载前获取文件大小

Question

基本上，我想要弄清楚是否应该使用AJAX来下载文件，这取决于文件大小。

我想这个问题也可以这样表达：如何仅获取ajax请求的头部信息？

---

编辑：ultima-rat0 在评论中告诉我已经有两个问题提出了相同的问题。它们非常相似，但都需要jQuery。 我希望得到一个非jQuery的解决方案。

- MiJyn

---

可能是重复的问题？https://dev59.com/xnM_5IYBdhLWcg3wMgAF和https://dev59.com/iHM_5IYBdhLWcg3wSBEU - ultima_rat0

@ultima_rat0 谢谢，不知道为什么它们没有出现在 stackexchange 的重复列表中...这只下载头文件吗？ - MiJyn

你可以手动获取XHR响应数据：http://www.w3.org/TR/XMLHttpRequest/#the-getresponseheader()-method - Hung Doan

@hungdoan 谢谢！！那完美地回答了我的问题 =D 你能把它转换成一个答案吗？ - MiJyn

Answer 1

您可以手动获取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.");
});

- Hung Doan

---

如果我使用变量而不是警报会怎样？为什么它们返回“未定义”？我如何将xhr.getResponseHeader（“Content-Length”）存储在变量中？ - Fabio Calvosa

@FabioCalvosa xhr.open("HEAD", url, true); // false 使请求异步因此，当您像这样调用该函数时： var myVar; get_filesize('https://sample.com'); alert(myVar); // 您的变量为“未定义”但是，如果您将代码更改为以下内容： var myVar; get_filesize('https://sample.com', function(){ alert(myVar); // 您的变量不会是“未定义”，因为您调用了一个“回调”方法 }); - Hung Doan

我在Chrome控制台中调用它，但是得到了NaN。 - Hzzkygcs

当头信息可用时，readyState可能更早地变为HEADERS_RECEIVED。 - Ricardo Seromenho

感谢您！它对我很有帮助：Content-Length。 - forest smoker

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

- Ebrahim Byagowi

---

如果响应体中实际接收到的内容长度小于Content-Length，有没有一种方法可以从服务器获取响应的未压缩大小？ - bytrangle

Answer 3

如果无法使用HEAD请求：

Ebrahim的解决方案在Firefox中并没有起作用，因为context-length在Firefox中不存在于已中止的请求中。所以我使用了' onprogress '事件代替' 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();
  }
);

- hook2raiz2gswitch2cork

Answer 4

1) 如果只需要头部信息，应始终优先使用“HEAD”而不是“GET”，因为有一个简单但不广为人知的细节：即使您使用“GET”并立即在readyState === 2时中止（如其他答案建议的那样），您已经收到了不仅是头部信息，还有第一块信息的全部内容（头部信息+部分正文），其大小可能会有所变化，但通常传输大小将不必要地至少翻倍。相反，使用“HEAD”，您可以确保只传输头部信息。

2) “Access-Control-Expose-Headers”必须公开“Content-Length”标头以便客户端访问。如果您正在处理多个来源资源，并且不确定是否已公开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通常会是解码后的主体大小（即使它不应该是这样）。这可以通过许多不同的方式来防止，但这是服务器端考虑的问题。

- Ernesto Stifano