javascript - 为什么相同的 JS 代码不适用于第二个帖子/图像，但适用于第一个帖子/图像？

Question

请检查此https://jsfiddle.net/rhbwpn19/4/

图像预览对于第一篇帖子工作正常，但对于其他帖子则不然。

我应该在这里改变什么？

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.单击下拉菜单并选择“查看”。

它将预览图像。现在浏览计算机上的任何图像，它会立即显示

效果很好。

但不适用于第二篇文章/图片。

Answer 1

我认为您错过了另一个模式中用于图像预览的 id blah 和用于输入 file 的 imgInp，所以下面我将它们放在 blah2 和 imgInp2 但另一个问题是，当您在第一个输入上上传第一个模态时，它也会显示到第二个模态。抱歉英语不好。

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>