如何使用Javascript在网页上获取图像的文件大小？

Question

我希望能够在网页上的图像上获取文件大小.

所以,假设我在页面上有一个图像(已加载),如下所示:

如何在Javascript中调用函数(或者更好的是,jquery)来获取图像的文件大小(而不是维度)？

重要的是要注意我没有使用任何输入或让用户上传图像,从文件API的浏览按钮获取图像大小有很多SO答案.

我想要做的就是根据它的id和src url获取页面上任意图像的文件大小.

编辑:我正在处理某些图像的保持连接,因此Content-Length标头不可用.

Answer 1

您无法直接获取文件大小（或其中的任何数据）。

唯一的方法有点脏，因为您必须执行 XMLHTTPRequest（根据“跨源资源共享”，它可能无法处理外部图像）。但有了浏览器的缓存，它不应该引起另一个HTTP请求。

var xhr = new XMLHttpRequest();
xhr.open("GET", "foo.png", true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function() {
    if(this.readyState == this.DONE) {
        alert("Image size = " + this.response.byteLength + " bytes.");
    }
};
xhr.send(null);