图片上传后未显示随机图，仅重置按钮生效的问题求助

Hey there! Let's figure out why your random image isn't showing up after upload—right now, you're hiding the element that randomImg() is modifying, which is why you only see changes when you hit reset. Here's the breakdown and fix:

What's Going Wrong #

1. In your readURL() function, you first hide the .image-upload-wrap (the element with ID quote), then call randomImg(). But randomImg() replaces the inner HTML of #quote—which is already hidden! So the random image never gets displayed to the user.
2. At the same time, you're still setting the .file-upload-image source to the user's uploaded image, so even if the random image was generated, it's not the one being shown.

Fixed Code & Explanations #

Updated HTML (no structural changes needed, included for context)

<div class="container file-upload"> 
  <div class="image-upload-wrap" id="quote"> 
    <input class="file-upload-input" type="file" onchange="readURL(this);" accept="image/*" /> 
    <div class="drag-text"> 
      <img src="Img/up-load.svg" class="mt-5 pt-5" width="80" alt="upload-image" /> 
      <h3 class="mb-5 pb-5 pt-3 upload-text">UPLOAD YOUR PICTURE HERE!</h3> 
    </div> 
  </div> 
  <div class="file-upload-content"> 
    <img class="file-upload-image" src="#" alt="random image" /> 
    <div class="image-title-wrap"> 
      <button type="button" onclick="removeUpload()" class="try-again-btn"> 
        <span class="reset">RESET!</span> 
      </button> 
    </div> 
  </div> 
</div>

Updated JavaScript

function readURL(input) {
  if (input.files && input.files[0]) {
    // Switch from upload area to content area
    $('.image-upload-wrap').hide();
    $('.file-upload-content').show();
    
    // Generate and display random image immediately after upload
    randomImg();
  } else {
    removeUpload();
  }
}

function removeUpload() {
  // Reset file input to allow re-uploading the same file
  $('.file-upload-input').replaceWith($('.file-upload-input').clone());
  // Switch back to upload area
  $('.file-upload-content').hide();
  $('.image-upload-wrap').show();
}

// Drag-and-drop handlers (unchanged)
$('.image-upload-wrap').bind('dragover', function () {
  $('.image-upload-wrap').addClass('image-dropping');
});
$('.image-upload-wrap').bind('dragleave', function () {
  $('.image-upload-wrap').removeClass('image-dropping');
});

function randomImg() {
  var quotes = [
    { text: '1', img: 'Img/1.jpg', },
    { text: '2', img: 'Img/2.jpg', },
    { text: '3', img: 'Img/3.jpg', },
    { text: '4', img: 'Img/4.JPG', },
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];
  
  // Update the visible image in the content area
  $('.file-upload-image').attr('src', quote.img);
  // Optional: If you want to show the quote text, add a <div class="image-title"></div> in the content area and uncomment below
  // $('.image-title').text(quote.text);
}

Key Changes Made #

• Removed redundant FileReader logic: Since you don't need to display the user's uploaded image, we can skip reading the file entirely and jump straight to showing the random image.
• Targeted the correct element: randomImg() now updates the visible .file-upload-image in the content area instead of modifying the hidden upload wrapper.
• Streamlined the upload flow: As soon as a file is selected, we switch to the content area and generate the random image right away.

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