Я пытаюсь понять, почему я не могу просмотреть несколько изображений, которые находятся в разных div.

Я добавляю новый div, который включает новый вход для загрузки файла, своего рода раздел для набора инструкций, каждый из которых имеет свое собственное изображение.

Когда я пытаюсь загрузить, предварительный просмотр работает только для первого div, а не для остальных. Я думал, что обработчик события будет работать, но это не так.

$('.instructions__add-new').on('click', function() {
    $('.instructions__append-inputs').append('<div class="instructions__container"><img id="instructionsImg" src=""><input type="file" class="instructions__image-input" name="recipe_instructions_image[]" onchange="document.getElementById("instructionsImg").src = window.URL.createObjectURL(this.files[0])"></div><div class="instructions__append-inputs"></div>');
});
#instructionsImg {
    width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="instructions__container">
    <img id="instructionsImg" src="">
    <input type="file" class="instructions__image-input" name="recipe_instructions_image[]" onchange="document.getElementById('instructionsImg').src = window.URL.createObjectURL(this.files[0])">
</div>
<div class="instructions__append-inputs"></div>
<div class="instructions__add-new">+ New Instruction</div>
1
Craig 31 Авг 2017 в 07:08

3 ответа

Лучший ответ

Если вы сделаете небольшое изменение, оно будет работать. Вместо того, чтобы найти его, используя previousSibling селектор в javascript. https://jsfiddle.net/e4wez2d1/1/

$('.instructions__add-new').on('click', function() {
  $('.instructions__append-inputs').append('<div class="instructions__container"><img id="instructionsImg" src=""><input type="file" class="instructions__image-input" name="recipe_instructions_image[]" onchange="this.previousSibling.src = window.URL.createObjectURL(this.files[0])"></div><div class="instructions__append-inputs"></div>');
});
2
Vineesh 31 Авг 2017 в 04:26

Из вашего кода, я думаю, вы должны использовать событие jquery для изменения ввода.

$('input.instructions__image-input').on('change',function(){
    var divParent = $(this).closest("div.instructions__container");
    $("#instructionsImg",divParent).attr("src",window.URL.createObjectURL(this.files[0])) ;
});
0
huy 31 Авг 2017 в 04:26

В вашем скрипте JQuery проверьте ваши кавычки в вашей строке.

onchange = " document ( " quote error " ) "

Используйте кавычки. Как \ "

0
Chr 31 Авг 2017 в 04:19