如何在 Javascript 中上传之前预览图像

2025-05-26

如何在 Javascript 中上传之前预览图像

在本文中，我将向您展示如何创建自定义图像上传和预览设计。图像预览是一个很棒的系统，您可以在上传图像之前检查该图像是否符合上传条件。

这是一个非常简单的系统，你只能借助 HTML 和 JavaScript 来创建。不过，我在这里使用了少量的 CSS 来设计它。

✅ 100+ 最佳 JavaScript 项目

✅观看实时预览👉👉上传图片并预览

HTML 有许多类型的输入函数，其中之一就是我们经常使用的文本、密码、电子邮件等。此外，还有一种称为文件输入 ( <input type=" file">) 的输入类型。在这里，您可以使用任何类型的文件进行输入。

这与常规输入设计类似。只需输入“文件”，无需输入“密码”或“邮箱”。它会从您的设备接收文件，然后将其显示为预览。但是，要实现此图像预览，您必须借助 JavaScript 或 JQuery。在这里，我使用纯 JavaScript 创建了此图像上传和预览设计。

上传前预览图像

现在是时候完全理解它是如何制作的了。在开始教程之前，让我先告诉你一些要点。首先，我用一些 CSS 设计了一个网页。然后我在网页上创建了一个框。我用框里的输入框做了一个小按钮。

我在这里用了水平仪制作按钮。用它制作了一个用于预览图像的小显示屏。最后我用 JavaScript 实现了它。让我们在下面的完整步骤中看看如何制作它。

步骤 1：使用 CSS 设计网页

首先，我使用CSS代码设计了网页。这里我们将网页的背景颜色设置为蓝色，高度设置为100vh。

body {
  margin:0px;
  height:100vh;
  background: #1283da;
}
Enter fullscreen mode Exit fullscreen mode

使用 CSS 设计网页

步骤 2：创建图像预览的基本结构

现在，我已经使用一些基本的 HTML 和 CSS 在网页上创建了一个小盒子。如上所示，图片预览和按钮都在这个盒子里。

盒子的宽度为 350 像素，背景颜色为白色。我在这里使用了一些盒子阴影，使其更明亮、更具吸引力。

 <div class="center">
  <div class="form-input">


  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.center {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;

}
.form-input {
  width:350px;
  padding:20px;
  background:#fff;
  box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
              3px 3px 7px rgba(94, 104, 121, 0.377);
}
Enter fullscreen mode Exit fullscreen mode

创建图像预览的基本结构

步骤 3：创建预览图像的地方

我制作了一个小显示屏来显示预览图像。虽然在正常情况下看不到，但只有在 JavaScript 的帮助下才能看到。

 <div class="preview">
   <img id="file-ip-1-preview">
 </div>
Enter fullscreen mode Exit fullscreen mode 
.form-input img {
  width:100%;
  display:none;
  margin-bottom:30px;
}
Enter fullscreen mode Exit fullscreen mode

步骤 4：创建输入框和按钮

现在，我使用文件输入创建了一个输入框，并在其中创建了一个按钮。我使用了输入层级来制作这个按钮。之后，我使用 CSS 为该层级赋予了按钮的形状。按钮高度为 45 px，并且width 45%……

 <label for="file-ip-1">Upload Image</label>
 <input type="file" id="file-ip-1" accept="image/*" onchange="showPreview(event);">
Enter fullscreen mode Exit fullscreen mode 
.form-input input {
  display:none;
}

.form-input label {
  display:block;
  width:45%;
  height:45px;
  margin-left: 25%;
  line-height:50px;
  text-align:center;
  background:#1172c2;
  color:#fff;
  font-size:15px;
  font-family:"Open Sans",sans-serif;
  text-transform:Uppercase;
  font-weight:600;
  border-radius:5px;
  cursor:pointer;
}
Enter fullscreen mode Exit fullscreen mode

创建输入框和按钮

步骤 5：使用 JavaScript 代码激活图像上传

如上所示，我们已经完成了设计。现在我将借助 JavaScript 来实现这个图像预览系统。

  function showPreview(event){
  if(event.target.files.length > 0){
    var src = URL.createObjectURL(event.target.files[0]);
    var preview = document.getElementById("file-ip-1-preview");
    preview.src = src;
    preview.style.display = "block";
  }
}
Enter fullscreen mode Exit fullscreen mode

使用 JavaScript 代码激活图像上传

使用 js 后，图片预览和上传功能将完全生效。点击上传按钮后，您将看到从文件中选择的任何图片的预览。

相关文章：

  1. 响应式页脚 HTML CSS
  2. 海得拉巴的国际学校
  3. 使用 JavaScript 的简单秒表
  4. JavaScript 密码生成器
  5. 海得拉巴的IB学校
  6. 使用 HTML CSS 的侧边栏菜单

希望您通过上面的教程学会了如何实现带预览的图片上传。我已经使用 JQuery 创建了一个多张图片预览系统。

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/how-to-preview-image-before-uploading-in-javascript-1f6g
Devto 翻译
PREV
CSS形状
NEXT
如何使用 JavaScript 制作待办事项列表