如何在上傳前預覽動態上傳的圖片？

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