前端图片上传预览尺寸控制：CSS与JavaScript实践

图片上传预览的基本实现

在网页开发中，用户上传图片并立即在前端显示预览是一个常见的需求。这通常通过 input type="file" 元素和 javascript 的 url.createobjecturl 方法实现。当用户选择文件后，javascript 读取文件对象，生成一个临时的url，然后将其赋值给 <img> 元素的 src 属性，从而在页面上显示图片。

以下是一个典型的图片预览实现代码：

<label for="imageInput_1">图片 1</label>
<input class="form-control" accept="image/*" name ="image1" type='file' id="imageInput_1" 
  onchange="imagePreviewFunc(this, imagePreview_1)" />
<div id="imagePreview_1"></div>

function imagePreviewFunc(that, previewerId) {
  let files = that.files;
  previewerId.innerHTML = ''; // 重置图片预览元素

  for (let i = 0; i < files.length; i++) {
    let imager = document.createElement("img");
    imager.src = URL.createObjectURL(files[i]);
    previewerId.append(imager);
  }
}

上述代码能够成功显示图片预览，但一个常见的问题是，这些预览图片通常会以其原始尺寸显示，导致页面布局混乱或占用过多空间。为了解决这个问题，我们需要对预览图片的尺寸进行精确控制。

方法一：使用CSS样式控制预览图片尺寸

最推荐和最优雅的解决方案是利用CSS来控制预览图片的尺寸。通过为预览图片定义一套样式规则，我们可以确保所有预览图都遵循统一的尺寸标准，同时保持结构与表现的分离。

首先，我们需要为包含预览图片的容器或图片本身定义一个明确的选择器。在我们的例子中，预览图片被追加到 id="imagePreview_1" 的 div 元素中。因此，我们可以针对该 div 内部的 img 元素应用样式。

立即学习“Java免费学习笔记（深入）”；

#imagePreview_1 img {
  width: 100px;  /* 设置宽度为100像素 */
  height: 100px; /* 设置高度为100像素 */
  object-fit: cover; /* 控制图片如何适应其内容框 */
}

CSS属性详解：

• width: 100px; 和 height: 100px;: 这两个属性直接将图片的尺寸强制设置为100x100像素。
• object-fit: 这是一个非常重要的CSS属性，它定义了 <img> 或 <video> 元素的内容应如何适应其内容框。它有几个常用值：
  • fill (默认值): 内容被拉伸以填充内容框，可能导致图片变形。
  • contain: 内容被缩放以保持其宽高比，同时适应内容框内部。可能会留下空白区域。
  • cover: 内容被缩放以填充整个内容框，同时保持其宽高比。如果图片的宽高比与内容框不匹配，图片的一部分可能会被裁剪。
  • none: 内容不被缩放。
  • scale-down: 比较 none 和 contain 之间较小的一个。

在这个场景中，object-fit: cover; 是一个很好的选择，它能确保图片完全覆盖100x100像素的区域，同时保持其原始比例，多余部分会被裁剪。如果希望图片完整显示而不被裁剪，可以使用 object-fit: contain;。

这种方法的好处在于：

1. 分离关注点： HTML、JavaScript 和 CSS 各司其职，代码更清晰。
2. 易于维护： 只需要修改一处CSS规则，即可改变所有预览图片的样式。
3. 性能优化： 浏览器渲染效率更高，因为样式在DOM加载时就已确定。

方法二：通过JavaScript动态应用内联样式

除了使用CSS规则，我们也可以直接在JavaScript代码中，当创建 <img> 元素时，为其动态添加内联样式。这种方法在某些特定场景下可能更有用，例如当样式需要根据运行时条件动态计算时。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

20

查看详情

修改 imagePreviewFunc 函数如下：

function imagePreviewFunc(that, previewerId) {
  let files = that.files;
  previewerId.innerHTML = ''; // 重置图片预览元素

  for (let i = 0; i < files.length; i++) {
    let imager = document.createElement("img");
    imager.src = URL.createObjectURL(files[i]);
    // 直接在JavaScript中设置内联样式
    imager.style.cssText = `width: 100px; height: 100px; object-fit: cover;`;
    previewerId.append(imager);
  }
}

JavaScript样式设置详解：

• imager.style.cssText =width: 100px; height: 100px; object-fit: cover;`: 这行代码直接将一个CSS字符串赋值给元素的style.cssText` 属性。这种方式会覆盖元素上已有的所有内联样式。
• 另一种设置方式是逐个设置样式属性，例如：

  imager.style.width = '100px';
  imager.style.height = '100px';
  imager.style.objectFit = 'cover'; // 注意CSS属性名在JS中变为驼峰命名

  登录后复制

  这种方式更精确，不会覆盖其他内联样式。

这种方法的好处在于：

1. 动态性： 样式可以在图片创建时根据逻辑动态生成。
2. 优先级高： 内联样式具有最高的优先级，可以覆盖外部CSS规则。

然而，过度使用内联样式可能会导致样式难以管理和维护，并且不利于代码的模块化。

两种方法的比较与选择

• 推荐使用CSS方法： 对于固定的预览尺寸和样式，强烈建议使用外部CSS样式表来控制。它遵循了Web开发的最佳实践（内容、结构、表现分离），使得代码更具可读性、可维护性，并且更易于进行全局调整。
• JavaScript方法适用于特定场景： 当图片的尺寸或样式需要根据用户行为、数据状态或其他复杂逻辑在运行时动态计算和应用时，JavaScript直接设置内联样式会是更灵活的选择。

在大多数图片预览场景中，预览图的尺寸是预先确定的，因此采用CSS方法是更优的选择。

注意事项

1. 响应式设计： 如果你的网站是响应式的，仅仅设置固定的 width 和 height 可能不足。你可以考虑使用相对单位（如 vw, vh, %）或结合媒体查询来调整预览图片尺寸。例如，max-width: 100%; height: auto; 可以在保持图片比例的同时，确保它不会超出其容器。
2. 用户体验： 在图片加载完成之前，可以考虑显示一个加载指示器（如Spinner），提升用户体验。
3. 内存管理： URL.createObjectURL 创建的URL是临时的，并且存储在内存中。为了避免内存泄漏，当预览图片不再需要时（例如，用户清除了文件选择或上传完成后），应该调用 URL.revokeObjectURL() 来释放这些URL。
4. 多图片预览： 如果需要预览多张图片，确保你的JavaScript逻辑能够正确处理文件列表并为每张图片创建独立的预览。

总结

精确控制前端图片上传预览的尺寸是提升用户体验和保持页面布局整洁的关键。通过本文介绍的两种方法——利用CSS样式规则或JavaScript动态应用内联样式，开发者可以灵活地实现这一目标。在大多数情况下，推荐使用CSS样式来保持代码的清晰和可维护性，而JavaScript动态样式则适用于需要更高灵活性的特定场景。同时，注意响应式设计、用户体验和内存管理，将有助于构建更健壮和用户友好的图片上传功能。

以上就是前端图片上传预览尺寸控制：CSS与JavaScript实践的详细内容，更多请关注php中文网其它相关文章！