多图片上传预览功能无法正常显示问题求助

Hey there! Let's fix that image preview issue you're having. Looking at your code snippet, I can spot a couple of key issues that are preventing your previews from showing up, plus a small naming mistake that would cause problems when submitting your form.

What's Going Wrong? #

• No preview logic: You've got file inputs and image tags for previews, but there's no JavaScript to actually handle reading the selected file and displaying it in the image tag.
• Duplicate name attributes: Both your file inputs have name="img1" — when you submit the form, only the last selected file would be sent to the server. You should give them unique names like img1 and img2.

Fixed Code with Preview Functionality #

Here's a complete, working version of your code with proper preview handling:

HTML (with fixes and event handlers)

<form id="mainform" method="post" enctype="multipart/form-data">
  <div class="upload-ad-photos">
    <label>Photos for your ad :</label>
    
    <!-- Fixed name, added image restriction, and preview trigger -->
    <input type="file" name="img1" id="img1" accept="image/*" onchange="previewImage(this, 'preview-img1')"><br>
    <img id="preview-img1" alt="Image 1 Preview" style="max-width: 200px; max-height: 200px; display: none;" />
    <br>
    
    <div class="clearfix"></div>
    
    <!-- Fixed name and added preview trigger -->
    <input type="file" name="img2" id="img2" accept="image/*" onchange="previewImage(this, 'preview-img2')"><br>
    <img id="preview-img2" alt="Image 2 Preview" style="max-width: 200px; max-height: 200px; display: none;" />
  </div>
</form>

JavaScript (handles image preview)

function previewImage(input, previewId) {
  const preview = document.getElementById(previewId);
  
  // Check if a file was selected
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    
    // When the file finishes loading, set the image source
    reader.onload = function(e) {
      preview.src = e.target.result;
      preview.style.display = 'block'; // Show the preview image
    }
    
    // Read the selected file as a data URL (this lets us display it in an img tag)
    reader.readAsDataURL(input.files[0]);
  } else {
    // Clear the preview if no file is selected
    preview.src = '';
    preview.style.display = 'none';
  }
}

What Did We Add/Change? #

• accept="image/*": Restricts the file picker to only show image files, making it easier for users to select the right type of file.
• onchange event: Triggers the previewImage function as soon as a user selects a file.
• FileReader API: This built-in browser tool reads the local image file and converts it into a data URL, which we can use as the src for our preview image tags.
• Initial display: none: Hides the preview images until a file is selected, so your UI doesn't show empty image boxes upfront.
• Unique name attributes: Ensures both files are sent to the server when the form is submitted.

This should get your image previews working smoothly! Let me know if you run into any other issues.

内容的提问来源于stack exchange，提问作者sanoj lawrence