http://site-o-matic.net/?viewpost=19
В конце ссылка на архив с картинками и исходником css и html.
Имя же файла можно писать в каком угодно диве или инпуте.
HTML
<div style="margin: 10px">
<input type='button' value='Обзор' id='browse_button' />
<input type='text' id='file_name' readonly=""/>
<input type='file' id='file_browse' style='margin-left: -9999px'/>
</div>
CSS
form {
font-size: 16px;
font-family: Verdana;
}
input[type="submit"], input[type="button"] {
cursor: pointer;
border: none;
padding: 4px 28px;
color: white;
background-color: #408B98;
border-radius: 4px;
font-family: Calibri, Tahoma, sans-serif;
font-size: 16px;
letter-spacing: 2px;
} input[type="submit"]:hover, input[type="button"]:hover {
background-color: #36828F;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.400);
} input[type="submit"]:active, input[type="button"]:active {
background: #23636E;
} input[type="text"] {
width: 320px;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #AAA;
font-family: Verdana;
font-size: 14px;
}
JS
$(document).ready(function() {
$('#browse_button').click(function() {
$('#file_browse').click().change(function() {
var lastIndexOfSep = this.value.lastIndexOf('\\'); // Windows
if (lastIndexOfSep == -1)
lastIndexOfSep = this.value.lastIndexOf('/'); // Linux
var fileName = this.value.substring(lastIndexOfSep + 1, this.length);
$("#file_name").val(fileName);
});
});
});
Пример на jsFiddle