在 JavaScript 中上传图片之前预览图片

在网页开发领域，能够在上传之前预览图片具有重要价值，使用户能够一瞥他们选择的图片并在提交之前进行必要的调整。开发人员可以使用功能强大的编程语言 JavaScript 来利用客户端处理的功能，以无缝地实现此功能。在本文中，我们将探讨如何在使用 JavaScript 上传图片之前预览图片，揭示分步方法并利用鲜为人知的技术来完成此任务。通过深入研究此过程的复杂细节，开发人员将获得宝贵的见解，从而增强用户体验并提供无缝的图片上传体验。

方法

在本文中，我们将了解在 JavaScript 中在上传之前预览图片的几种方法：

  • 使用 URL 类

  • 使用 FileReader 类

方法 1：使用 URL 类

为了增强 Web 应用程序中文件上传的用户体验，我们可以使用 JavaScript 和 URL 类在上传之前预览图片。首先，创建一个类型为“file”的 HTML 输入元素和一个用于显示预览的 HTML 图片元素。添加一个事件监听器来检测文件选择。使用输入元素的“files”属性访问所选文件。使用 URL 类和 createObjectURL() 方法生成一个表示文件的临时 URL。将图片元素的 src 属性设置为生成的 URL 以显示图片预览。要处理非图片文件或取消操作，请使用“type”属性验证文件类型。请记住，临时 URL 是特定于会话的，并且会在会话结束时由浏览器自动撤销。

示例

在此 HTML 代码中，我们有一个类型为“file”的输入元素，其 accept 属性设置为“image/*”，以将文件选择限制为图片。onchange 属性分配给 JavaScript 函数 previewImage(event) 以处理文件选择更改。previewImage(event) 函数检索所选文件，创建一个 FileReader 对象并分配其 onload 事件处理程序。加载文件后，从 FileReader 的 result 属性获取图片的数据 URL。然后，将此 URL 分配给 id 为“preview”的图片元素的 src 属性以显示所选图片。可选的 CSS 样式将“preview”图片元素的宽度和高度分别设置为 300 像素。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>Preview Image Before Upload</title>
   <script type="text/javascript">
      function previewImage(event) {
         var input = event.target;
         var image = document.getElementById('preview');
         if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
               image.src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
         }
      }
   </script>
   <style>
      #preview {
         width: 300px;
         height: 300px;
      }
   </style>
</head>
<body>
   <h2>Preview Image Before Upload</h2>
   <input type="file" accept="image/*" onchange="previewImage(event)">
   <br>
   <img id="preview" alt="Preview Image">
</body>
</html>

输出

文件输出预览图片 1.gif 将插入此处。

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

方法 2：使用 FileReader 类

为了在 Web 开发中启用上传前的图片预览，请使用 JavaScript 的 FileReader 类。首先创建一个 HTML 文件输入元素和一个用于显示预览的图片元素，并使用适当的 ID。然后，创建一个由文件输入的值更改触发的 JavaScript 函数。使用“files”属性检查是否选择了文件，并创建一个 FileReader 实例。使用实例的 readAsDataURL 方法将所选文件转换为数据 URL，表示图片为 base64 编码的字符串。将此 URL 分配给图片元素的“src”属性。最后，侦听文件输入上的“change”事件并调用函数以更新图片预览。

示例

在上面的代码中，我们定义了一个 JavaScript 函数，当文件输入值更改时触发。在此函数内部，我们检查是否选择了文件并创建 FileReader 类的实例。我们使用 readAsDataURL() 方法将文件转换为数据 URL。然后，我们设置一个事件侦听器，用于在文件读取完成后，并将数据 URL 分配给图片元素的 src 属性。最后，我们在文件输入元素上添加一个事件侦听器，在选择文件时触发预览函数。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>Preview Image Before Upload</title>
</head>
<body>
   <h4>Preview Image Before Upload</h4>
   <input type="file" id="imageInput">
   <br>
   <img id="previewImage" alt="Preview" style="max-width: 200px; max-height: 200px;">
   <script>
      const imageInput = document.getElementById('imageInput');
      const previewImage = document.getElementById('previewImage');
      function previewSelectedImage() {
         const file = imageInput.files[0];
         if (file) {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
               previewImage.src = e.target.result;
            }
         }
      }
      imageInput.addEventListener('change', previewSelectedImage);
   </script>
</body>
</html>

输出

文件输出预览图片 1.gif 将插入此处。

结论

总之，使用 JavaScript 在上传之前预先查看图片的能力为 Web 开发工作赋予了一种自主性和精致感。通过利用这项巧妙技术的强大功能，开发人员可以为用户提供先进的体验，灌输信心并促进明智的决策。这种方法的明智应用确保了美观且简化的工作流程，最终实现了功能与美学的和谐融合。总而言之，使用 JavaScript 启用上传前的图片预览培养了非凡的用户体验，体现了现代 Web 开发实践的独创性和能力。

更新于： 2023 年 8 月 4 日

9K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告