Question

大家好，我真的需要帮助预览多个图像，例如将其放置在不同的背景图像url span或divs中

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>

因为跨度具有不同的类，它们具有不同的样式。我只希望图像填充在跨度索引上

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>

编辑到此为止。.调用函数并将div ids传递给该函数

$（“ Upload_button_id_here”）。change（function（）{readURL（this，img_div_id_here）;}）;

Answer 2

刚弄清楚我的问题。我只是初始化一个包含let我的循环，并将其连接到数字不同的类

Popen

如何在上传到特定背景图片网址之前预览多张图片

2 个答案: