True speaker True speaker - 4 years ago 111
Javascript Question

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

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.

enter image description here


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



enter image description here


  1. It works fine.



enter image description here


  1. But not working for the second post/image .
    enter image description here


Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download