Question

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

我附加了一个新div，其中包含一个用于文件上传的新输入，一组用于指令的部分，每个部分都有自己的图像。

当我尝试上传时，预览仅适用于第一个div而不是其余部分。我认为on事件处理程序可以工作，但事实并非如此。

＆＃13;

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

＆＃13;

#instructionsImg {
    width: 150px;
}

＆＃13;

<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>

＆＃13;

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>');
});

Answer 2

在您的JQuery脚本中，检查字符串中的引号。

onchange = " document ( " quote error " ) "

使用反斜杠引号。喜欢 \“

Answer 3

从你的代码中，我认为你应该使用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])) ;
});

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

3 个答案: