"image upload prview"
Bootstrap 4.1.1 Snippet by akshayptdr4

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <img src="images/dummy/paymethod14.png" class=" fea-img"> <input type="file" class="upld-file"> </div> </div>
$(".upld-file").change(function (event) { var ev = event.target; if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } function imageIsLoaded(e) { $(ev).parent().siblings('.fea-img').attr("src", e.target.result); }; });

Related: See More


Questions / Comments: