<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://use.fontawesome.com/4e4388f72e.js"></script> <div class="container"> <h3 class="text-center">Preview an image before it is uploaded</h3> <hr /> <div class="form-group"> <div class="main-img-preview"> <img class="thumbnail img-preview" src="" title="Preview Logo"> <div class="input-group-btn"> <div class="fileUpload btn fake-shadow"> <span><i class="fa fa-camera" aria-hidden="true"></i></span> <input id="logo-id" name="logo" type="file" class="attachment_upload"> </div> </div> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300); body { font: 12px 'Open Sans'; } .form-control, .thumbnail { border-radius: 2px; } .btn-danger { background-color: #B73333; } /* File Upload */ .fake-shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .fileUpload { position: relative; overflow: hidden; width: 100%; height: 100%; /*padding: 35%;*/ } .fileUpload #logo-id { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 33px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); height:100%; } .fileUpload i { color: #efefef; } .container { width: 500px; height: 500px; margin: 0 auto; } .main-img-preview { width:68px; height:50px; } .img-preview { border: 0.5px solid black; max-width: 100%; max-height:100%; background-color:grey; } .main-img-preview { position:relative; } .input-group-btn { position:absolute; top: 6px; right: 20px; padding-top:0; /*width:30px; height:30px;*/ }

window.onload = function(){ function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.querySelector('.img-preview').setAttribute('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } } var imageInput = document.querySelector('#logo-id'); imageInput.onchange=changeEventHandler; function changeEventHandler(event) { readURL(this); } }; /* jquery equivalent of code above */ /*$(document).ready(function() { // Source: http://stackoverflow.com/a/4459419/6396981 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.img-preview').attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } } $("#logo-id").change(function() { readURL(this); }); });*/