<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-md-6"> <div class="form-group"> <label>Upload Image</label> <div class="input-group"> <span class="input-group-btn"> <span class="btn btn-default btn-file"> Browse… <input type="file" accept="image/png, image/jpeg, image/gif" id="imgInp"> </span> </span> <input id='urlname'type="text" class="form-control" readonly> </div> <button id="clear" class="btn btn-default">Clear</button> <img id='img-upload'/> </div> </div> </div>

.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } #img-upload{ width: 100%; }

$(document).ready( function() { $(document).on('change', '.btn-file :file', function() { var input = $(this), label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [label]); }); $('.btn-file :file').on('fileselect', function(event, label) { var input = $(this).parents('.input-group').find(':text'), log = label; if( input.length ) { input.val(log); } else { if( log ) alert(log); } }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-upload').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); $("#clear").click(function(){ $('#img-upload').attr('src',''); $('#urlname').val(''); }); });