<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 ----------> <label for="file"> <img class="avatar-thumb pointer" src="https://www.dkstudio.in/img/logo.png" class="logo" id="profile-img-tag" width="50%"> <input type="file" id="file" name="user_img" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png" multiple="" data-original-title="upload photos"> </label>

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#profile-img-tag').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#file").change(function(){ readURL(this); });