Custom styled file Upload

I know you are here with scratching your head about file upload.Here is lil trick you can do for any kind of style. ;)



Script
---------
put this in your script block.Don't forget  to include jquery script
 jQuery(document).ready(function() {
    $('input[type=file]').each(function(){
   
    var uploadbuttonlabeltext = $(this).attr('title'); //get title attribut for languagesettings
    if(uploadbuttonlabeltext == ''){
    var uploadbuttonlabeltext = 'Browse';
    }
   
    var uploadbutton = '<input type="button" class="new_form_submit1" value="Browse it!" />';
    $(this).wrap('<div class="fileinputs"></div>');
    $(this).addClass('file').css('opacity', 0); //set to invisible
    $(this).parent().append($('<div class="fakefile" />').append($('<input type="text" class="new_form_upload1"/>').attr('id',$(this).attr('id')+'__fake')).append(uploadbutton));
   
    $(this).bind('change', function() {
    $('#'+$(this).attr('id')+'__fake').val($(this).val());;
    });
    $(this).bind('mouseout', function() {
    $('#'+$(this).attr('id')+'__fake').val($(this).val());;
    });
    });
   
    });

css
-----------

input.file {
    height: 28px;
    opacity: 0;
    position: relative;
    text-align: right;
    z-index: 2;
}
div.fakefile {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

.new_form_upload1 {
    border: 1px solid #CCCCCC;
    color: #333333;
    font-size: 12px;
    height: 18px;
    margin-right: 10px;
    width: 140px;
}
.new_form_submit1 {
    background: none repeat scroll 0 0 #666666;
    border: medium none;
    color: #FFFFFF;
    font-size: 12px;
    height: 22px;
    text-align: left;
    width: 130px;
}

HTML
-------

<input id="FilesEventLogo" class="new_form_submit1 file" type="file" name="samplejpg">

happy coding