javascript - 如何在上传前预览动态上传的图片？

Question

我想了解为什么我无法预览位于不同 div 中的多个图像。

我正在附加一个新的 div，其中包括用于文件上传的新输入，类似于一组说明的部分，每个部分都有自己的图像。

当我尝试上传时，预览仅适用于第一个 div，不适用于其余部分。我原以为 on 事件处理程序会起作用，但它不起作用。

$('.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>

Answer 1

如果你做一个小的改变，它就会起作用。而不是在 javascript 中使用 previousSibling 选择器找到它。 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>');
});