jquery - 如何在特定背景图片 url 上传之前预览多张图片

Question

大家好，我真的需要关于预览多张图片的帮助，比如将它放到不同的背景图片 url span 或 div 上

function previewImages() {
        if (this.files) $.each(this.files, readAndPreview);

        function readAndPreview(i, file) {
        if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
          return alert(file.name +" is not an image");
        } // else...
        var reader = new FileReader();
        $(reader).on("load", function() {
          $('span').css('background-image', 'url(' + this.result + ')');
        });
        reader.readAsDataURL(file);
        }
    }
$('#upload-incident-images').on("change", previewImages);

我希望它是这样的

<div>
 <span class="bigger-picture" style="background-image: url('image1')>
 <span class="smaller-picture" style="background-image: url('image2')>
 <span class="smaller-picture" style="background-image: url('image3')>
<div>

因为 span 有不同的类，具有不同的样式。 我只想让图像填充跨度索引

Answer 1

调整大小 <span>如你所愿。你可以把img####您想要显示它们的 ID。只需将图片 ID 放入您的 <span> 中即可

我希望这会回答你的问题。

function readURL(input,div_id) {
  var divId = '#'+div_id.id;
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
   
      $(divId).attr('src', e.target.result);  
    } 
    reader.readAsDataURL(input.files[0]);
  }
}


$("#img1").change(function() { readURL(this,imgBigger); }); 
$("#img2").change(function() { readURL(this,imgSmall); }); 
$("#img3").change(function() { readURL(this,imgSmaller); }); 

#imgBigger{ width:500px; height:500px;}
#imgSmall{ width:300px; height:300px;}
#imgSmaller{ width:50px; height:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form1" runat="server">
  <input type='file' id="img1"  />
  <input type='file' id="img2" />
  <input type='file' id="img3" />

  <div class="your_class1"><img id="imgBigger" src="#" alt="imgBigger" /></div>
  <div class="your_class2"><img id="imgSmall" src="#" alt="imgSmall" /></div>
  <div class="your_class3"><img id="imgSmaller" src="#" alt="imgSmaller" /></div>
</form>

Edited Here you go.. 调用函数并传递 div ids到那个函数

$("Upload_button_id_here").change(function() { readURL(this, img_div_id_here); });