<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row"> <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="input-group"> <input type="text" class="form-control file-name" disabled> <span class="input-group-btn"> <div class="btn btn-default file-input"> <span class="glyphicon glyphicon-folder-open"></span> <span id="file-btn-text"> Browse</span> <input type="file" id="file-upload"/> </div> </span> </div> </div> </div> </div>

.container{ margin-top:20px; } .file-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .file-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }

$(function() { $(".file-input input:file").change(function (){ var file = this.files[0]; var reader = new FileReader(); // Set preview image into the popover data-content reader.onload = function (e) { $("#file-btn-text").text(" Change"); $(".file-name").val(file.name); } reader.readAsDataURL(file); }); });