why the same JS code is not working for the second post/image but works fine with first one?

Question

kindly check this https://jsfiddle.net/rhbwpn19/4/

Image preview is working fine for the first post but not for the other posts.

what should I change here ?

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

reader.onload = function(e) {
  $('#blah').attr('src', e.target.result);
}

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

}
}



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

1.click on the dropdown menu and select View.

2. It will preview the image. now browse any image from your computer and it will immediately show

3. It works fine.

4. But not working for the second post/image .

Answer 1

There are several problems in your code.

1.In your HTML, You have two #imgInp elements.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). - w3schools.com

Use two different ids for the two file inputs like below.

<input type="file" class="file" id="imgInp1"/>
<input type="file" class="file" id="imgInp2"/>

2.Use .file as the selector in your JS. (to select both inputs.)

$('.file').change(function() {
    readURL(this);
});

3.Check for the clicked input and handle them.

reader.onload = function(e) {
    if($(input).attr('id')==='imgInp1') { // first input
        $('#blah1').attr('src', e.target.result);
    } else if ($(input).attr('id')==='imgInp2'){ // second input
        $('#blah2').attr('src', e.target.result);
    }
}

DEMO: https://jsfiddle.net/rhbwpn19/10/

This is my first answer. Let me know if i have done anything wrong. thank you :)

Answer 2

I think you miss the id blah for image preview and imgInp for input file in the other modal so below i put them for blah2 and imgInp2 but the other problem is when you upload on the 1st modal on first input it is showing also to 2nd modal. Sorry for bad english.

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
        $('#blah2').attr('src', e.target.result);
    }

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

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

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');


.2nd-post{
  
  margin-top:50;
  
}

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





<div class="dropdown" style=" float:right; margin-right:28% ">
		 
		 <span style=" cursor: pointer; " class="glyphicon glyphicon-chevron-down dropdown-toggle" data-toggle="dropdown">
		 
		
		 
		 </span>
		 
		 <ul class="dropdown-menu">
    <li  data-toggle="modal" data-target="#myModal"><a>View</a></li>
    
    
  </ul>
		 
		 
		 
		 </div>

<img  style="border: 1px solid rgb(221, 221, 221);
border-radius: 8px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);margin-left: 8%;  " src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width=" 80%" />




<div class="dropdown" style=" float:right; margin-right:28% ">
		 
		 <span style=" cursor: pointer; " class="glyphicon glyphicon-chevron-down dropdown-toggle" data-toggle="dropdown">
		 
		
		 
		 </span>
		 
		 <ul class="dropdown-menu">
    <li  data-toggle="modal" data-target="#myModal2"><a>View</a></li>
    
    
  </ul>
		 
		 
		 
		 </div>

<img  style="border: 1px solid rgb(221, 221, 221);
border-radius: 8px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);margin-left: 8%;  " src="http://www.uniwallpaper.com/static/images/EPUlp9X_YqNR99f.jpg" width=" 80%" />




<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Edit Post</h4>
      </div>
      <div class="modal-body">
        
        
        
        
        
		<div id="edit_post">

		
		
		
		
		</div>
		<div style="margin-bottom:1%">
		
		
  </div>
   

		
		 <input type="file" name="image2" class="file" id="imgInp"/>
		
		
	  <img id="blah" style="border: 1px solid rgb(221, 221, 221);
border-radius: 8px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);margin-left: 8%;  " src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width=" 80%" />

	  
	  
		

		
		</div>
		
      </div>
      <div class="modal-footer">
        <button  style="float: left;" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		<span  >  <button type="submit" class="btn btn-info" name="saveedit" > Save </button></span>
      </div>
    </div>

  </div>


<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Edit Post</h4>
      </div>
      <div class="modal-body">
        
        
        
        
        
		<div id="edit_post">

		
		
		
		
		</div>
		<div style="margin-bottom:1%">
		
		
  </div>
   

		
		 <input type="file" name="image2" class="file" id="imgInp2"/>
		
		
	  <img id="blah2" style="border: 1px solid rgb(221, 221, 221);
border-radius: 8px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);margin-left: 8%;  " src="http://www.uniwallpaper.com/static/images/EPUlp9X_YqNR99f.jpg" width=" 80%" />

	  
	  
		

		
		</div>
		
      </div>
      <div class="modal-footer">
        <button  style="float: left;" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		<span  >  <button type="submit" class="btn btn-info" name="saveedit" > Save </button></span>
      </div>
    </div>

  </div>