Custom file input field

HTML:

<span>
<input id=”photo” name=”photo” type=”file” />
<span>Choose a Photo</span>
</span>

CSS:

.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
}
.file-wrapper .button {
background: #79130e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
padding: 4px 18px;
text-transform: uppercase;
}
.file-wrapper input {
cursor: pointer;
height: 100%;
position: absolute;
right: 0;
top: 0;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
font-size: 100px;
}

JavaScript:

VIGET.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button'),
$fakeFile = $this.siblings('.file-holder');
if(newVal !== '') {
$button.text('Photo Chosen');
if($fakeFile.length === 0) {
$button.after('' + newVal + '');
} else {$fakeFile.text(newVal);}
}
};

 

$(document).ready(function() {
$('.file-wrapper input[type=file]')
.bind('change focus click', VIGET.fileInputs);
});

http://viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery