Image Upload with Reset Button

Add to favorites

      <div class="form-row">
        <div class="container">
          <label class="ants-label-light" >Club Emblem</label>
        </div>
          <div class="input-group mb-6 container justify-content-center">
            <div class="row">
              <div class="col-6">
                <form action="/uploads" method="post" enctype="multipart/form-data">
                  <label class="btn btn-ants">
                    <i class="fa fa-image"></i> Upload Club Emblem
                    <input type="file" style="display: none;" name="club_emblem" id="imgInp">
                  </label>
                </form>
              </div>
              <div class="col-6">
                <label class="btn btn-secondary file_reset"> <!-- Remove Image -->
                  <i class="fa fa-undo"></i>
                </label>
              </div>
            </div>
          <div class="image-display-box">
            <form runat="server">
              <img class="upload_display" src="#" alt="Club Emblem" />
            </form>
          </div>
        </div>
      </div>

$( document ).ready(function() {
  // ///////////////////////////////////////////////////////////////////////////
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          $('.upload_display').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]); // convert to base64 string
      }
    }
    $("#imgInp").change(function() {
      readURL(this);
    });
    $('.file_reset').on('click', function() {
      $('.upload_display').attr('src', '');
    });
  // ///////////////////////////////////////////////////////////////////////////
});