如何在上传前使用 JavaScript 验证图像尺寸？

在上传之前使用 JavaScript 验证图像尺寸

为了确保用户遵守图像尺寸指南，在上传之前检查图像宽度和高度非常重要.

文件验证

您的现有代码验证文件类型和大小。要添加图像尺寸检查，您需要从上传的文件创建图像对象。

使用 createObjectURL()

现代浏览器中的 createObjectURL() 方法允许您从文件创建临时 URL 对象。然后，您可以使用 Image 对象异步加载图像：

<code class="javascript">const file = target.files[0];
const objectUrl = URL.createObjectURL(file);

const img = new Image();
img.onload = () => {
  console.log(`Width: ${img.width}, Height: ${img.height}`);
  URL.revokeObjectURL(objectUrl);
};

img.src = objectUrl;</code>

注意事项

• createObjectURL() 仅在现代浏览器（如 Firefox、Chrome）中受支持、和 Opera。
• 完成后必须调用 URL.revokeObjectURL() 方法来释放临时 URL。

演示

请参阅此处的实例：https://jsfiddle.net/4N6D9/1/

注意： 如前所述，此方法是特定于浏览器的，可能无法在所有平台上一致地工作.

以上是如何在上传前使用 JavaScript 验证图像尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！