Красивый input file

8-11-2010

Столкнулся с такой проблемой как input типа file, наверное все знают что он выглядит в разных браузерах по разному, и применять к нему какие то стили нету смыла так как они будут работать везде по разному. В общем цель сделать красивый выглядящий везде одинаково input типа file.
Начнем с HTML, пытаться применить к инпуту стили даже не будем и искать Jquery плагин тоже, хотя можно было б найти наверно подходящий. Давайте просто сэмулируем внешний вид инпута, а при нажатии на симулированную кнопку будем пытаться javascriptом открыть диалоговое окно выбора файла, а чтоб было лучше давайте расположим настоящий инпут над симулированной кнопкой Обзор, и сделаем его прозрачным, выглядеть это будет примерно так:


Ну и разметка

<div class="f_imulation_wrap">
    <div class="im_input">
        <input type="text"/>
    </div>
    <div class="im_button">
        <span class="inptext">Обзор</span>
        <input type="file" id="imulated" size="30"/>
    </div>
</div>

Теперь нужно как то расположить это правильно как я уже говорил CSS:

.im_input{
    float:left;
}
.im_input input{
    border:1px solid #9f9f9f;
    padding:2px;
    font-size:12px;
    width:250px;
    margin-right:4px;
}
.im_button{
    width:60px;
    height:19px;
    overflow:hidden;
    background:#aeaeae;
    border:1px solid #949494;
    position:relative;
}
.im_button.act{
    background:#bfbfbf;
}
.inptext{
    font-size:13px;
    line-height:19px;
    margin-left:12px;
    position:absolute;
}
#imulated{
    width:60px;    
    border:none;
    opacity:0;
    filter: alpha(opacity=0);
    padding:0px;
    margin:0px;
    position:absolute;
}

Сейчас наша штука выглядит так:


В принципе все работает но при выборе файла текстовое поле слева остается пустым исправим это Javascript
Будем при onchange настоящего инпута типа файл, менять значение текстового поля. Конечно будем использовать Jquery:

$('#imulated').change(function(){
    
    $('.im_input input').val($(this).val());
    
});

Сделаем еще эффект при наведении для кнопки обзор, будем добавлять ему класс:

$('#imulated').mouseover(function(){
   
    $('.im_button').addClass('act');
    $(this).css('cursor','pointer');
    
});

$('#imulated').mouseout(function(){
  
    $('.im_button').removeClass('act');
    
});

Простым Css это к сожалению не получиться потому что :hover для имулирующей кнопки не срабатывает так как над ним находится прозрачный input.
Ну и последнее будем пробовать нажимать на инпут при нажатии на текстовое поле:

$('.im_input input').click(function(){
    
    $('#imulated').trigger('click');
    
});

К сожалению работать эта функция будет только в хроме и в сафари так как при онклик в других браузерах на инпут типа файл не срабатывает диалоговое окно.

Если вам нужно обменять валюту вам сюда ->обмен валюты

Ну и напоследок несколько видов того как он может выглядеть ото че то сероватый получился


С фантазией у меня не очень так что дальше сами фантазируйте со стилями

ДЕМО ВЕРСИЯ
посмотреть в действииСКАЧАТЬ
скачать на компьютер
alex11.5.2011 12:11
Для IE попробуй так: $('.im_input input').attr('value', $(this).val());
alex11.5.2011 12:11
Это даст видимую запись в инпуте
alex11.5.2011 12:11
Вообщем оператор change не работает без $(document).ready(function(){...});
alex11.5.2011 12:11
Вот попробуй это. $(document).ready(function(){ $('#imulated').change(function(){ $('.im_input input').attr('value', $(this).val()); }); $('.im_input input').click(function(){ $('#imulated').trigger('click'); }); });
    dzantiev11.5.2011 12:11
    тут подразумевается что все вложено в $(document).ready(function(){...}); А в IE и так работает, в 6 правда не тестил
alex11.5.2011 12:11
Ну вообщем заработало везде, что собственно и нужно. Спасибо за идею.
Стас12.16.2011 01:12
Для Ie можно сделать так: if($.browser.msie) $('#imulated').trigger('click').cnahge($('.im_input input').val($('#imulated').val())); В Остальных такая связка глючит.
    Стас12.16.2011 01:12
    Забавненько. Даже с ошибкой, "Самый лучший браузер" отработал без ошибок. Поправлю change
vbodarev1.23.2012 09:01
Быть может хватить на 6 осла смотреть! Выпущен он 11 лет назад)))
Антон1.21.2013 09:01
Самое простое это поставить на экран инпут файл и убрать его за пределы экрана или уменьшить и скрыть, и свободно его использовать имея его айди и всё... Работает во всех браузерах, ибо самым обыкновенным образом пишется.
Антон1.21.2013 10:01
#upload{position:relative; top:-1000px;}// или ещё дальше $(document).ready(function() { $('#btn').click(function(){ $('#upload').click(); }); });
ОСТАВИТЬ КОММЕНТАРИЙ