David Gonzalez David Gonzalez - 2 months ago 12
Javascript Question

JavaScript on image upload add image preview to closet div

When i upload an image it will make preview of the image inside a div.
I have accomplished that already. But i want to upload multiple images.

When i try to upload a image it makes a preview in multiple places.

I want image1 to be uploaded and preview in the image1 container and when image 2 two be uploaded and previewed in a image 2 container.

Here is the jsfiddle. I was trying to use .closest but no avail
https://jsfiddle.net/a49cL7m3/1/

$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {

$('.img-preview').attr('src', e.target.result);
if ($('.uploaded-image').is(':hidden')){
$('.uploaded-image').toggleClass("hidden")
$('.add-image').toggleClass("hidden")
}
}

reader.readAsDataURL(input.files[0]);
}
}

$(".imgInp").change(function(){
readURL(this);
});

});

Answer

That's because you are not referencing to the elements that are relative to the file input, your code applies this to ALL elements with the classes specified.

  $('.img-preview').attr('src', e.target.result);
  if ($('.uploaded-image').is(':hidden')){
  $('.uploaded-image').toggleClass("hidden")
  $('.add-image').toggleClass("hidden")
  }
  }

You should reference them like this:

  $(document).ready(function() {
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        var
        $container = $(input).closest('.upload'), // Find relative .upload container
        $preview = $container.find('.img-preview'), // Find relative .img-preview in the container
        $uploadedImage = $container.find('.uploaded-image'), // Find relative .uploaded-image in the container
        $addImage = $container.find('.add-image'); // Find relative .add-image in the container

        reader.onload = function(e) {
          
		  // Use relative elements in your code
          $preview.attr('src', e.target.result);
          if ($uploadedImage.is(':hidden')) {
            $uploadedImage.toggleClass("hidden")
            $addImage.toggleClass("hidden")
          }
        }

        reader.readAsDataURL(input.files[0]);
      }
    }

    $(".imgInp").change(function() {
      readURL(this);
    });

  });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 col-md-offset-1">
  <form id="form1">
    <p style="text-align:center;"> <b>Image 2</b> </p>
    <div class="upload center-block">
      <input class="input-file imgInp" type="file">
      <label for="files">
        <span class="add-image">
          Add <br> Image
        </span>

        <span class="uploaded-image hidden">
          <img  class="img-preview" src="#" width="160" height="160" alt="your image" style="margin:0px" />
        </span>
        <output id="list"></output>
      </label>
    </div>
  </form>
</div>
<div class="col-md-2 col-md-offset-1">
  <form id="form1">
    <p style="text-align:center;"> <b>Image 1</b> </p>
    <div class="upload center-block">
      <input class="input-file imgInp" type="file">
      <label for="files">
        <span class="add-image">
          Add <br> Image
        </span>

        <span class="uploaded-image hidden">
          <img  class="img-preview" src="#" width="160" height="160" alt="your image" style="margin:0px" />
        </span>
        <output id="list"></output>
      </label>
    </div>
  </form>
</div>

Comments