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

Question

我希望能够获得网页图像上的文件大小。

因此，我在页面上有一个图像（已加载）是这样的：

我如何在Javascript（或更好的是jquery）中调用函数以获取图像的文件大小（而不是尺寸）？

[值得注意的是，我没有使用任何输入或没有让用户上传图像，关于使用文件API从浏览按钮获取图像大小的答案很多。

我要做的就是根据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);

Answer 2

这里是一个对我有用的React版本，在可以节省一些时间的情况下发布它。

表单字段

<input type="file" 
   name="file"  
   id="file" 
   multiple="multiple" 
   onChange={onChangeHandler} 
   className="fileUp" />

JSX

const onChangeHandler = event => {
    console.log(event.target.files[0].size);
}

Answer 3

假设您可以使用HTML5

] >>

1. 创建画布
2. 在其中放置图像
3. 用.toDataURLHD()抓取图像数据
4. 获取base64编码的字符串
5. 使用一些mad calculation以字节为单位获取图像大小。

玩得开心！

也许使用服务器端脚本要容易得多，所以它不会依赖HTML5