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