зачем? - просто от нех делать))
такие уже есть! - они страшные и генерят всякое говно, а меня это пугает))
демка – http://keyx.narod.ru/input_file/
собственно вот так это работает…
<input type="file" name="" class="file" />/* your styles */
#jinput_file { width:250px; } // ширина всего элемента
#jinput_file .jinput_input,
#jinput_file .jinput_input span { height:34px; } // высота элемента
#jinput_file .jinput_input span { line-height:30px; padding:0 15px 0 10px; margin-left:5px; font-size:13px; font-weight:bold; } // оформление кнопочки
#jinput_file .jinput_input,
#jinput_file .jinput_input span,
#jinput_file .jinput_input:hover,
#jinput_file .jinput_input:hover span,
#jinput_file.jinput_disable .jinput_input,
#jinput_file.jinput_disable .jinput_input span { background:url('img/button.gif') 0 0 no-repeat; } // фон кнопочки
#jinput_file .jinput_name { line-height:34px; margin:0 10px; } // оформление вывода имени файла
// остальное не трогаем
/* default style */
#jinput_file { overflow:hidden; }
#jinput_file .jinput_input { position:relative; overflow:hidden; }
#jinput_file .jinput_input span { display:block; background-position:100% 0; }
#jinput_file .jinput_input:hover { background-position:0 50%; }
#jinput_file .jinput_input:hover span { background-position:100% 50%; }
#jinput_file .jinput_input input { font-size:72px; position:absolute; top:-20px; right:-20px; opacity:0; filter:alpha(opacity=0); cursor:pointer; }
@-moz-document url-prefix() {#jinput_file .jinput_input input { left:-850px; }}
#jinput_file .jinput_name { float:left; }
#jinput_file.jinput_disable .jinput_input input { display:none; }
#jinput_file.jinput_disable .jinput_input { background-position:0 100%; }
#jinput_file.jinput_disable .jinput_input span { background-position:100% 100%; color:#666; cursor:default; } button.gif прилагается…
функция…
$('input.file').jInput({
buttonLocation : 'right', // расположение кнопки right/left
buttonText : 'Обзор…', // текст кнопки
relFormats : ['jpg', 'jpeg', 'gif', 'png'], // массив допустимых форматов
errFormatText : 'неверный формат', // сообщение об ошибке
disable : false // активность элемента
});это сам плагин…
(function($) {
$.fn.jInput = function(options) {
var defaults = {
buttonLocation : 'right',
buttonText : 'Обзор…',
relFormats : ['jpg', 'jpeg', 'gif', 'png'],
errFormatText : 'неверный формат',
disable : false
},
opts = $.extend(defaults, options);
this.each(function() {
disable = opts.disable ? ' class="jinput_disable"' : '';
$(this).wrap('<div id="jinput_file"'+disable+'><div class="jinput_input" style="float:'+opts.buttonLocation+';"></div><span class="jinput_name"></span></div>');
$(this).parent().append('<span>'+opts.buttonText+'</span>');
$(this).val('');
});
this.change(function() {
var fileName = $(this).val().replace(/(.+\\)/i,'').replace(/(.{10}).{3,}(.{10})/i,'$1…$2'),
relFormats = new RegExp('('+opts.relFormats.join('|')+')', 'i');
a = fileName.split('.');
fileFormat = a[(a.length-1)];
if (fileFormat.match(relFormats)) {
$(this).parent().next().text(fileName);
} else {
$(this).parent().next().text(opts.errFormatText);
$(this).val('');
}
});
};
})(jQuery);собственно всё)) если найдете косяки, постараюсь пофиксить)) если че криво написал, попробую исправить))
