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

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

如果你犯了一个小的变化，它会奏效。它使用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>'); 
}); 

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