时间戳

首页 > 解决方案 > 在 img html 标签中限制文件大小

javascript - 在 img html 标签中限制文件大小

问题描述

我在我的网站上显示上传到另一个平台的图像，但我想保护我的用户免于下载超大文件（例如 50MB gif）。我无法控制上传过程，也无法在上传期间限制文件。

是否有任何选项可以限制网页上图像的文件大小？<img src="..." maxSize="5MB" />如果检测到文件大于 5MB，浏览器会取消下载吗？

标签： javascripthtml

解决方案

在您的站点上呈现图像之前，您可以执行 HEAD 请求并检查Content-Length响应的标头。

头

如果使用 HTTP GET 方法请求请求的 URL，则HTTPHEAD方法请求将返回的标头。HEAD例如，如果 URL 可能会产生大量下载，则HEAD请求可以读取其Content-Length标头以检查文件大小，而无需实际下载文件。

来源：https ://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/HEAD

例如，您可以使用fetch api：

// This URL should point to a very large image, but currently it points to an avatar
const imageUrl = 'https://www.gravatar.com/avatar/eb03f51fd573efda46453d9b928de5e2?s=48&d=identicon&r=PG';

// Example
fetch(imageUrl, { method: 'HEAD' })
  .then(response => {
    const imageSizeInBytes = response.headers.get('content-length');
    console.log(`Image size: ${imageSizeInBytes} bytes.`);
  });

推荐阅读