如何在选择时和将图像保存到数据库之前显示图像？

正如我所说，我试图在选择时创建一个图像，它会在按下保存按钮之前向我显示预览图像。

像这样的东西：

<div class="row align-items-center my-5">
      <div class="col-lg-7">
        <img class="img-fluid rounded mb-4 mb-lg-0" src=" HERE WILL BE THE IMAGE SELECTED   " alt="">
      </div>
  <!-- /.col-lg-8 -->
  <div class="col-lg-5">
    <a class="btn btn-primary" href="#">Seleccionar!</a>
  </div>
</div>
<!-- /.row -->

<div class="row">
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">IMAGEN 1</h2>
        <p class="card-text">Descripcion......</p>
      </div>
      <div class="card-footer">
        <a href="#" class="SELECCIONAR">More Info</a>  //When i press this button, i want to show a preview image in the field up beofore i press "Seleccionar!"...
      </div>
    </div>
  </div>