Preview gambar sebelum upload dengan Javascript

Bagaimana cara preview gambar sebelum upload?

caranya sangat gampang, kamu dapat menambahkan script berikut

<div class="form-group">
                <label for="imageUrl"> Image </label>
                <div class="row">
                  <div class="col-5">
                    <img id="image-preview-update" alt="image preview" width="200px"/>
                  </div>
                  <div class="col-6">
                    <input type="file" id="image-source-update" name="image" onchange="previewImageUpdate();"/>
                  </div>
                </div>
              </div>

function previewImageUpdate() {
      document.getElementById("image-preview-update").style.display = "block";
      var oFReader = new FileReader();
      oFReader.readAsDataURL(document.getElementById("image-source-update").files[0]);
  
      oFReader.onload = function(oFREvent) {
        document.getElementById("image-preview-update").src = oFREvent.target.result;
      };
    };

Maka hasilnya akan seperti ini

Semoga membantu

Preview gambar sebelum upload dengan Javascript

Leave a Reply Cancel reply