Я исправил ваш пример JS fiddle здесь -
https://jsfiddle.net/5gLqthrj/27/
Так что же нужно обновить?
Весь ваш код показывает всплывающее окно, обновляяфайл и т. д., используется общий код селектора $('.image-preview') jQuery.Однако все 3 загрузчика файлов использовали этот класс, поэтому всякий раз, когда вы использовали этот код, все ТРИ выбирались и обновлялись.Вам нужно быть более конкретным и, конечно, выбрать только один клик.
Так как это сделать?
Существуют разные способы, но вот простое решение:
Когда событие (например, click или hover, которое вы используете) связано в jQuery, вы можете сослаться на $(this) (или $(event.currentTarget)), чтобы точно определить, КАКОЙ элемент был выбран.Затем, вместо обновления всех элементов с этим классом, вы обновляете только this.У вас также есть несколько других селекторов, которые нуждались в обновлении с аналогичной проблемой селекторов, не достаточно специфичных, поэтому вместо того, чтобы делать оптовый захват $('.selector-here'), я изменил код, чтобы искать только этот селектор в соответствующем элементе, используя .findНапример, $(this).find('.selector-here')
Надеюсь, это имеет смысл для вас:)
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$(this).popover('show');
},
function () {
$(this).popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
var $preview = $(this).closest('.image-preview');
$preview.attr("data-content","").popover('hide');
$preview.find('.image-preview-filename').val("");
$preview.find('.image-preview-clear').hide();
$preview.find('.image-preview-input input:file').val("");
$preview.find(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
var $preview = $(this).closest('.image-preview');
reader.onload = function (e) {
$preview.find(".image-preview-input-title").text("Change");
$preview.find(".image-preview-clear").show();
$preview.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$preview.attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>