Стилизация Input File

Есть куча способов изменить стандартное оформление Input File, но к сожалению, многие из них оказываются слишком громоздкими и зачастую не кроссбраузерными.

Поэтому я решил поделиться с вами, наиболее оптимальным решением.

Главная его идея заключается в том, чтобы обернуть реальный Input File в тег label, затем мы просто скрываем реальный Input File, ну а label по сути будет являться той самой кликабельной областью, кликнув по которой у нас будет появляться диалоговое окно, с предложением выбрать файл на нашем компьютере.

Таким образом, скрыв реальный Input File, мы можем превратить label в некую кнопку выбора файла.

Как видите, все очень просто.

Ну а теперь давайте приступим к реализации нашей идеи.

HTML

Как всегда начнем с HTML структуры:

<div class="file-upload">
     <label>
          <input type="file" name="file">
          <span>Выберите файл</span>
     </label>
</div>

Нам необходимо, тот текст, который мы хотим выводить на кнопке выбора файла, поместить в тег span, а далее все это обязательно обернуть в тег label и затем еще и в div с классом file-upload.

CSS

После, напишем немного стилей

.file-upload {
     position: relative; /* Даем возможность делать позиционирование, внутри данного элемента */
     overflow: hidden; /* Все что выходит за пределы - скрываем */ 
     width: 20%; /* Задаем ширину кнопки выбора файла */ 
     height: 20px; /* Задаем высоту кнопки выбора файла */  
     background: #6da047;
     border-radius: 3px;
     padding: 8px 4px;
     color: #fff;
     text-align: center;
}
.file-upload:hover {
     background: #7aad55;
}
.file-upload input[type="file"]{
    display: none; /* Обязательно скрываем настоящий Input File */
}
.file-upload label {
     /* Растягиваем label на всю возможную площадь блока .file-upload */
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
}
.file-upload span {
     line-height: 36px; /* Делаем вертикальное выравнивание текста, который написан на кнопке */
}

Все стили, которым я написал комментарий, являются обязательными и их необходимо задавать, чтобы у нас все заработало нормально. Остальные же, вы можете добавлять на свое усмотрение.

Теперь если мы посмотрим на наш результат, то увидим, что по факту, уже все работает, кнопка имеет другой вид и при этом мы спокойно можем выбрать файл на нашем компьютере.

Только есть одна проблема, если вы выберете файл, то визуально это никак не отобразится. Что в свою очередь, может поставить посетителя сайта в ступор.

Ведь, если вы выберете файл с использованием стандартного Input File, то рядом с данным инпутом, будет выведен путь, до выбранного файла, но так как мы с вами скрыли настоящий Input File, то сейчас мы ничего не увидим.

Поэтому наша задача сделать так, чтобы при выборе файла, путь который содержится в скрытом Input File, дублировался в какое-то место.

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

Давайте сейчас все реализуем.

Для этого, к нашей HTML структуре, добавим простое текстовое поле.

<div class="file-upload">
     <label>
          <input type="file" name="file">
          <span>Выбрать файл</span>
     </label>
</div>
<input type="text" id="filename" class="filename" disabled>

Обращаю ваше внимание, что у поля есть атрибут disabled, он нужен для того, чтобы сам посетитель не смог менять значение данного поля.

Также добавим немного стилей для нашего поля:

.filename {
     background: #fff;
     border: 0;
}

Ну сам JS (я для этих целей написал небольшой скрипт на jQuery), который будет заниматься дублирование пути из Input File в только что добавленное текстовое поле.

$(document).ready( function() {
    $(".file-upload input[type=file]").change(function(){
         var filename = $(this).val().replace(/.*\\/, "");
         $("#filename").val(filename);
    });
});

Примечание: по факту, данные скрипт дублирует не полный путь к файлу, а только лишь непосредственно само название файла.

Теперь у нас после выбора файла, в добавленное поле ввода, будет подставляться название выбранного файла. Тем самым, пользователь уже будет видеть, что файл был прикреплен.

На это собственно все, мы как всегда справились с требуемой задачей.

Что касается кроссбраузерности, то данный способ работает в IE9+, Chrome, Firefox, Mozilla, Opera, Safari.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев нет

Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад