HTML页面多输入图片展示需求：现有单图代码改造

Got it, let's upgrade your current single-image setup to support multiple file uploads and previews. Here's a step-by-step breakdown of the changes you need to make:

1. Update the HTML Structure #

First, we'll replace the single <img> preview with a container that can hold multiple images, and add the multiple attribute to the file input so users can select more than one file:

<!-- Trigger image (keeps your click-to-upload behavior) -->
<img src="img/package_thumbnail.png" class="myAvatar" style="cursor: pointer;">

<!-- Container for multiple image previews -->
<div id="imagePreviewContainer" style="margin: 15px 0;"></div>

<!-- File input with multiple attribute enabled -->
<input type="file" name="newAvatar" id="newAvatar" style="display: none;" onchange="readURL(this);" required multiple />

<script>
  // Keep your existing click trigger logic
  $(".myAvatar").click(function() {
    $("#newAvatar").trigger("click");
  });
</script>

2. Rewrite the readURL Function #

Your original readURL only handles one file—we'll modify it to loop through all selected files, create image elements for each, and append them to the preview container:

function readURL(input) {
  // Optional: Clear existing previews (remove this line if you want to keep adding new images without replacing old ones)
  $("#imagePreviewContainer").empty();

  if (input.files && input.files.length > 0) {
    // Loop through every selected file
    for (let i = 0; i < input.files.length; i++) {
      const file = input.files[i];
      const reader = new FileReader();

      reader.onload = function(e) {
        // Create a new image element for each preview
        const previewImg = $("<img>")
          .attr("src", e.target.result)
          .attr("alt", "Uploaded Image " + (i + 1))
          .css({
            "display": "inline-block",
            "width": "120px", // Adjust size to your needs
            "height": "120px",
            "margin": "0 8px 8px 0",
            "object-fit": "cover", // Maintain image aspect ratio
            "border": "1px solid #eee",
            "border-radius": "4px"
          });
        
        // Add the new preview image to the container
        $("#imagePreviewContainer").append(previewImg);
      };

      reader.readAsDataURL(file);
    }
  }
}

Key Changes Explained #

• multiple attribute: Added to the file input to allow selecting multiple files in one go.
• Preview container: The <div id="imagePreviewContainer"> replaces the single <img> tag, giving us a flexible space to display all uploaded previews.
• File loop: The for loop processes each selected file individually, creating a unique preview image for every upload.
• Optional clear behavior: The empty() call resets the preview container each time new files are selected—remove it if you want users to build a list of images incrementally.

Bonus: Clean Up Styles with CSS #

For better maintainability, move inline styles to a CSS block instead:

.myAvatar {
  cursor: pointer;
}

#imagePreviewContainer img {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin: 0 8px 8px 0;
  object-fit: cover;
  border: 1px solid #eee;
  border-radius: 4px;
}

That's it! Now your setup will let users select multiple images and display all previews inline as expected.

内容的提问来源于stack exchange，提问作者Albertus Ageng