The code

<input id="lefile" type="file" style="display:none">
<div class="input-append">
   <input id="photoCover" class="input-large" type="text">
   <a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>
</div>

<script type="text/javascript">
$('input[id=lefile]').change(function() {
   $('#photoCover').val($(this).val());
});
</script>

So this is quite easy:

1. Define a normal, hidden file input field, and a visible bootstrap-styled field that looks pretty.
2. Attach an onclick to the pretty input, that makes it click the hidden one.
3. When the pretty Browse button is clicked – it sends a click to the real file input. This will in turn pop up the file selection dialog.
4. After the user selects a file, the hidden file input’s change() event is called. This will copy the value of the real (hidden) file
   input to the pretty one. We do this to mimic the behaviour of file input fields – that they show you the file name after it is selected.
5. Voila!