请检查此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.单击下拉菜单并选择“查看”。
- 它将预览图像。现在浏览计算机上的任何图像,它会立即显示
- 效果很好。
最佳答案
我认为您错过了另一个模式中用于图像预览的 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">×</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">×</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>
关于javascript - 为什么相同的 JS 代码不适用于第二个帖子/图像,但适用于第一个帖子/图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41995632/