JavaScript实现图片上传预览及获取图片尺寸和大小的完整指南

在现代Web开发中，提供图片上传的预览功能以及获取图片的尺寸和大小信息，已成为提升用户体验的重要手段。本文将详细介绍如何使用JavaScript实现这些功能，帮助你在用户上传图片前进行有效的验证和优化。

一、实现图片预览

要在用户选择图片后立即预览，可以使用HTML5的FileReader对象将图片文件读取为Data URL，并将其设置为<img>元素的src属性。

示例代码：

<input type="file" id="imageInput" accept="image/*">
<img id="preview" alt="图片预览" />

document.getElementById('imageInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('preview').src = e.target.result;
  };
  reader.readAsDataURL(file);
});

通过上述代码，用户选择图片后，页面将立即显示该图片的预览。

二、获取图片尺寸

在图片加载完成后，可以通过创建一个新的Image对象来获取其宽度和高度。

示例代码：

reader.onload = function(e) {
  const dataURL = e.target.result;
  document.getElementById('preview').src = dataURL;

  const image = new Image();
  image.onload = function() {
    const width = image.width;
    const height = image.height;
    console.log(`图片尺寸：${width} x ${height}`);
  };
  image.src = dataURL;
};

此方法可以在图片加载完成后，准确获取其实际尺寸。

三、获取图片大小

图片文件的大小可以通过File对象的size属性获取，单位为字节（bytes）。

示例代码：

const fileSize = file.size;
console.log(`图片大小：${(fileSize / 1024).toFixed(2)} KB`);

此代码将图片大小转换为KB，并保留两位小数。

五、性能优化建议

在处理大尺寸图片时，直接使用Data URL可能会导致性能问题。为此，可以考虑使用URL.createObjectURL方法来创建图片的预览链接，并在不再需要时使用URL.revokeObjectURL释放资源。

示例代码：

const objectURL = URL.createObjectURL(file);
document.getElementById('preview').src = objectURL;

// 在不再需要时释放资源
URL.revokeObjectURL(objectURL);

此方法可以有效减少内存使用，提升性能。

通过上述方法，你可以在用户上传图片前，提供图片预览，并获取其尺寸和大小信息，从而实现更好的用户体验和数据验证。