Javascript 如何在上传前预览动态上传的图像？

我试图理解为什么我不能预览不同div中的多个图像

我添加了一个新的div，其中包括一个文件上传的新输入，类似于一个指令集的部分，每个指令都有自己的图像

当我尝试上传时，预览只对第一个div有效，对其余部分无效。我原以为on事件处理程序可以工作，但事实并非如此

$（'.instructions\uu add-new'）。在（'click'，function（）上{
$（'.instructions\uuu append-inputs'）。append（''）；
});
#指令模拟{
宽度：150px；
}

+新指令
在JQuery脚本中，检查字符串中的引号

onchange = " document ( " quote error " ) "

使用反斜杠引号。就像代码中的\“
一样，我认为应该使用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])) ;
});

如果您做了一个小的更改，它就会工作。而不是使用javascript中的
previousSibling
选择器来查找它。

$（'.instructions\uu add-new'）。在（'click'，function（）上{
$（'.instructions\uuu append-inputs'）。append（''）；
});
document.getElementById（“instructionsImg”）
将选择具有该ID的第一个元素，这就是元素需要具有唯一ID的原因。您没有为每个元素使用唯一ID。我最近开始学习xpath，并没有想到它也可以以这种方式使用。谢谢。如果有人遇到此问题，
$('.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>');
});