image uploader

Image Upload

---

Html

 <div class="row">

                <div class="col-12">

                  <input type="file" accept="/Image" id="fileField" />

                  <div class="imageUploader text-center">

                    <div id="imageView">

                      <img id="DisplayImg"

                        src=

"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/310px-Placeholder_view_vector.svg.png"

                      />

                    </div>

                    <button class="btn btn-info btn-sm px-3 mt-2 " id="imageUploadBtn">

                      Upload Image <i class="fa fa-upload"></i>

                    </button>

                  </div>

                </div>

              </div>

Copied!

---

CSS

 .imageUploader{

  position: relative;

  width: 230px !important;

}

#imageView{

  height: 210px !important;

   width: 230px !important;

  border: gray solid 1px;

  border-radius: 2%;

  padding: 2px;

  position: relative;

}

#imageView>img{

  width: 100%;

  height:100%;

}

#fileField{display: none;}

Copied!

---

JS

$(document).ready(function (e) {

    $('#fileField').on('change', function (e) {

        const file = e.target.files[0];

        const url = window.URL.createObjectURL(file);

        const img = document.getElementById('DisplayImg')

        img.setAttribute('src', url)

       

      })

    $("#imageUploadBtn").click(function(){

        $('#fileField').trigger('click');

    })

})

Copied!