0

Hello guys i really need help regarding to preview multiple images such as putting it onto different background-image url span or 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);

i want it to be like this

<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>

because spans have different classes which has different styles. i just want the images to fill on the span indexes

silver
  • 1
  • 1
  • Possible duplicate of [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – Raphael Dec 17 '18 at 07:22

2 Answers2

0

Size them <span> as you want. And you can put img#### IDs where you want to show them. Just Put the image IDs inside your <span>s.

I hope this will answer you question. 

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.. Call function and pass div ids to that function

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

  • Hi @Bilal Yaqoob there is a mistake in my question. i want each multiple images to have its designated divs. i just updated the content of my question. thanks for your response btw – silver Dec 18 '18 at 07:20
  • exactly, is there any method to use or maybe loops? – silver Dec 18 '18 at 09:36
  • Hi @Bilal Yaqoob. i want one input that can upload multiple images, not one by one upload – silver Dec 19 '18 at 01:58
0

just figured out my question. i just initialize a loop containing let i and concatenate it to classes that has different in numbers 

for (let i = 0; i < 3; i = i + 1) {
    var reader = new FileReader();

    reader.onload = function(event) {
    $('.incident-img-'+i).css('background-image', 'url(' + event.target.result + ')');
    console.log(i);
                }
    reader.readAsDataURL(input.files[i]);
}
silver
  • 1
  • 1