限制加载了<img/>标记的图像的大小(按字节)

时间:2017-08-17 00:49:57

标签: html image

最初的问题:我希望我未来的网络服务器的用户可以使用头像。 最初的解决方案(及其问题)

  • 让用户上传自己的图片并保存

    • 这里的专业人员是我可能从一开始就限制图像的大小
    • 问题,相反,即使似乎没有人关心太多,也是合法的:不确定它在其他国家是如何运作的,但在这里你可能被认为对你在你的硬盘上存储的东西承担责任,在某些情况下(我不会列出,但你可能会猜到)。这意味着,如果有人在您的服务器上将非法图像作为其头像上传,然后向当局报告,您可能会发现自己遇到某种麻烦,这可能会导致服务器无法正常运行申请数月,进行“进一步调查”。
  • 在这里我们提出了第二个想法:让用户定义并保存图像的链接,为他的头像

    • 亲:合法安全
    • 缺点:如果用户定义了一个100MB图像的链接,然后可能会强制所有用户下载以查看该页面,该怎么办?

所以问题是:有没有办法向浏览器“说”当它看到:

<img src='http://external.jpg' ...> 

external.jpg大小应该限制在100KB?如果它超过那个尺寸,那么就减掉它的载荷?

1 个答案:

答案 0 :(得分:1)

使用此功能,您可以获取文件大小并确定从那里做什么。如果你想将它存储在你的硬盘上,你也可以使用像Clarifai这样的API来检查非法内容。

&#13;
&#13;
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("URLHERE", function(size) {
    alert("The size of foo.exe is: " + size + " bytes.");
});
&#13;
&#13;
&#13; 资料来源:Ajax - Get size of file before downloading