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