Стили для поля загрузки файла

Разработчики часто сталкиваются с ситуацией, когда сложно обеспечить, чтобы input type file в форме выглядело одинаково в разных браузерах. Или чтобы стиль кнопки «Выбрать файл» соответствовал общим стилям сайта.

В этой статье мы рассмотрим пример на JQuery, CSS и HTML для создания настраиваемого пользовательского интерфейса загрузки файлов, который выглядит одинаково в разных браузерах. Также в нем можно настроить кнопку "Выбрать файл", чтобы она соответствовала стилистике вашего сайта.

HTML-код для поля загрузки файлов:

Обратите внимание на классы в следующем коде:

<input type="text" class="file_input_textbox" readonly="readonly" value='No File Selected'>
<div class="file_input_div">
    <input type="button" value="Browse" class="file_input_button" />
    <input type="file" name="uploaded_file" class="file_input_hidden"/>
</div>

Классы CSS для описанных выше компонентов

Приведенные ниже стили CSS играют основную роль в настройке input type file стилизации. С помощью CSS мы делаем три вещи:

• Скрываем сам элемент ввода с помощью класса file_input_hidden;
• Настраиваем кнопку выбора файла с помощью класса file_input_button и добавляем к ней эффект наведения, используя класс file_input_button_hover;
• Настраиваем свойства текстового поля, используя класс file_input_textbox:

<style>
.file_input_textbox {height:25px; width:200px; float:left; }
.file_input_div {position: relative; width:80px; height:26px; overflow: hidden; }
.file_input_button {width: 80px; position:absolute; top:0px; border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px; border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer; opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0; }
</style>

Вы можете внести следующие изменения в CSS:

• Изменить размер текстового поля и кнопки;
• Изменить цвет фона кнопки, а также фоновое изображение;
• Увеличить текстовое поле и кнопку, изменить / удалить их границу;
• Изменить внешний вид html input type file, добавляя / удаляя CSS-код для конкретного браузера.

JQuery-код для добавления / удаления классов CSS при событии mouseover

Можно поместить код пользовательской проверки в следующий код JQuery.

Например, для события hange(), мы заменяем префикс fakepath, который применяется браузером Google Chrome:

<script src="jquery-1.8.2.min.js"></script>

<script>

$(document).ready(function() {

  $('.file_input_button').mouseover(function(){
          $(this).addClass('file_input_button_hover');
    });

  $('.file_input_button').mouseout(function(){
        $(this).removeClass('file_input_button_hover');
    });

  $('.file_input_hidden').change(function(){

        var fileInputVal = $(this).val();

        fileInputVal = fileInputVal.replace("C:fakepath", "");

        $(this).parent().prev().val(fileInputVal);

    });
});

</script>

Примеры:

Добавьте приведенный выше код оформления input type file в разметку страницы и проверьте его в браузерах. Мы протестировали его в Firefox и Google Chrome.

Не забудьте поместить jquery-1.8.2.min.js в ту же папку, где располагается html-файл. Или можно загрузить JQuery с помощью Google CDN.

С помощью настройки элементов интерфейса через CSS можно сделать поле загрузки файла таким: