<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="col-md-4 col-md-offset-2"> <br/><br/> <div class="input-group"> <input type="text" class="form-control file-upload-text" disabled placeholder="select a file..." /> <span class="input-group-btn"> <button type="button" class="btn btn-default file-upload-btn"> Browse... <input type="file" class="file-upload" name="myFile" /> </button> </span> </div> <br/><br/> <p>Use your favorite bootstrap button style:</p><br/> <div class="input-group"> <input type="text" class="form-control file-upload-text" disabled placeholder="select a file..." /> <span class="input-group-btn"> <button type="button" class="btn btn-success file-upload-btn"> Browse... <input type="file" class="file-upload" name="myFile" /> </button> </span> </div> <br/><br/> <div class="input-group"> <input type="text" class="form-control file-upload-text" disabled placeholder="select a file..." /> <span class="input-group-btn"> <button type="button" class="btn btn-danger file-upload-btn"> Browse... <input type="file" class="file-upload" name="myFile" /> </button> </span> </div> <br/><br/> <div class="input-group"> <input type="text" class="form-control file-upload-text" disabled placeholder="select a file..." /> <span class="input-group-btn"> <button type="button" class="btn btn-info file-upload-btn"> Browse... <input type="file" class="file-upload" name="myFile" /> </button> </span> </div> </div>

.file-upload { position: absolute; top: 0; left: 0; width:100%; height:100%; opacity: 0; cursor: pointer; }

function initializeFileUploads() { $('.file-upload').change(function () { var file = $(this).val(); $(this).closest('.input-group').find('.file-upload-text').val(file); }); $('.file-upload-btn').click(function () { $(this).find('.file-upload').trigger('click'); }); $('.file-upload').click(function (e) { e.stopPropagation(); }); } // On document load: $(function() { initializeFileUploads(); });