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

Question

基本上，我想确定是否应该使用 AJAX 下载文件，具体取决于文件大小。

我想这个问题也可以改写为：如何仅获取 ajax 请求的标头？

---

编辑：评论中的ultima-rat0告诉我已经提出的两个问题显然与这个问题相同。它们非常相似，但它们都想要 jQuery。我想要一个非 jQuery 解决方案。

Answer 1

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

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

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

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

Answer 3

如果 HEAD 请求是不可能的：

解决方案 Ebrahim 对我来说仅在 Firefox 中不起作用，因为上下文长度不适用于 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();
  }
);

Answer 4

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 通常是解码主体的大小（即使它不应该）。这可以通过许多不同的方式来防止，但这是服务器端的考虑。