如何在 jquery 中显示多个图像预览 - Javascript (1)

📌 相关文章

📜 如何在 jquery 中显示多个图像预览 - Javascript (1)

📅 最后修改于: 2023-12-03 15:08:40.157000 🧑 作者: Mango

如何在 jQuery 中显示多个图像预览 - JavaScript

在许多 Web 应用程序中，您可能需要提供一个功能，以允许用户选择并预览多个图像。在本文中，我们将介绍如何使用 jQuery 和 JavaScript 来实现这个功能。

HTML

我们首先需要一个 HTML 表单，在其中包含多个 input 元素以选择图像：

<form>
  <input type="file" name="file1" />
  <input type="file" name="file2" />
  <input type="file" name="file3" />
</form>

请注意，每个 input 元素都有一个唯一的名称，以便我们后来可以引用它们。

JavaScript

现在，我们将编写一些 JavaScript 代码，以便在用户选择图像后，将它们预览在页面上。

$(document).ready(function() {
  $('input[type="file"]').change(function() {
    var files = $(this)[0].files;
    var parent = $(this).parent();

    // remove any existing previews
    parent.find('.preview').remove();

    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var reader = new FileReader();

      reader.onload = function(e) {
        parent.append('<img class="preview" src="' + e.target.result + '"/>');
      }

      reader.readAsDataURL(file);
    }
  });
});

让我们逐步解释这些代码：

我们使用 jQuery 的 ready() 方法来确保文档已准备好处理 JavaScript。
我们选择所有类型为文件（file）的 input 元素，并将改变（change）事件绑定到它们上面。这意味着每当用户选择新的图像时，我们的代码都将运行。
我们使用 $(this)[0].files 来检索用户选择的文件。请注意，$(this) 实际上返回一个包含 input 元素的 jQuery 对象，因此我们需要使用 [0] 来访问实际的 DOM 元素。
我们使用 jQuery 的 parent() 方法来找到 input 元素的父元素。这样我们可以将预览添加到相同的区域。
我们使用 jQuery 的 find() 方法来查找所有现有的预览图像，并将它们从 DOM 中删除。
我们使用一个循环来处理每个文件。对于每个文件，我们使用 FileReader 类创建一个新的读取器对象。
我们将 onload 事件绑定到读取器对象，以便在图像文件读取完成时运行我们的代码。
我们使用 readAsDataURL() 方法来读取文件的内容，并将其解释为 base64 编码的字符串。
最后，我们使用父元素的 append() 方法将一个新的 img 元素添加到 DOM 中。

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple image preview with jQuery and JavaScript</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      img.preview {
        height: 100px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="file" name="file1" />
      <input type="file" name="file2" />
      <input type="file" name="file3" />
    </form>
    <script>
      $(document).ready(function() {
        $('input[type="file"]').change(function() {
          var files = $(this)[0].files;
          var parent = $(this).parent();

          // remove any existing previews
          parent.find('.preview').remove();

          for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();

            reader.onload = function(e) {
              parent.append('<img class="preview" src="' + e.target.result + '"/>');
            }

            reader.readAsDataURL(file);
          }
        });
      });
    </script>
  </body>
</html>

总结

本文介绍了如何使用 jQuery 和 JavaScript 在 Web 应用程序中提供多个图像预览的功能。我们通过解释 HTML、JavaScript 和 jQuery 的代码来说明实现细节，展示了完整的代码示例。