How do I show image preview though jquery?

Question

I have a field which is upload image images but the problem is this field has add row functionality with the help of append function. What I want to show the image preview on select of the image in each added row so, please tell me how I can do this. view page-

 jQuery(document).ready(function() { $("#append").click(function(e) { e.preventDefault(); $(".inc").append('<div class="controls">\\ <input name="product_image[]" id="product_image" class="form-control" type="file">\\ <a href="#" style="margin-left: 50px; position:relative;left:575px;top:-31px;" class="remove_this btn btn-danger">Remove</a>\\<div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;"><img src="" class="imgpre" id="imgPrev" style="width: 200px; height: 150px; border: 1px solid #ddd" ></div><br>\\ <br>\\ </div>'); return false; }); jQuery(document).on('click', '.remove_this', function() { jQuery(this).parent().remove(); return false; }); $("input[type=submit]").click(function(e) { e.preventDefault(); $.map($(".inc :text"), function(el) { return el.value }).join(",\\n") }) }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imgPrev').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#product_image").change(function() { readURL(this); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label class="col-sm-2 control-label" for="parentId">Image</label> <div class="col-sm-6 inc"> <input name="product_image[]" id="product_image" class="form-control" type="file"> <button style="margin-left: 50px; position:relative;left:575px;top:-31px;" class="btn btn-info" type="submit" id="append" name="append"> Add</button> <br> <br> </div> <div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;"> <img src="" class="imgPrev" id="imgPrev" style="width: 200px; height: 150px; border: 1px solid #ddd"> </div> </div> 

Answer 1

Starting with your code (but modified, separated CSS etc.) I came up with this quick solution :

 $(document).on("change", "input.form-control", function() { readURL(this); }); const readURL = input => { if (input.files && input.files[0]) { let reader = new FileReader(); reader.onload = e => { $(input) .siblings("img") .attr("src", e.target.result); }; reader.readAsDataURL(input.files[0]); } }; $("#append") .click(() => { $(".form-group").append(` <div class="row"> <input class="form-control" type="file"> <br> <img src="" class="imgPrev"> <button class="remove">Remove</button> </div> `); }) .trigger("click"); $(document).on("click", "button.remove", function() { $(this).parent().remove(); return false; }); 

 .btn-add { margin-left: 50px; position: relative; left: 200px; } .row { margin-bottom: 20px; } .row .imgPrev { width: 200px; height: 150px; border: 1px solid #ddd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <button class="btn btn-add" id="append">Add</button> </div>