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

04 Июня 2020 13:18

Как известно, стандартными средствами css нельзя стилизовать кнопки загрузки файлов в формах (Input[type="file"]). Поэтому стилизация достигается отрисовкой свой кнопки, сокрытем стандартного инпута и перехвата вводимых пользователем данных и подставлением в скрытый ранее инпут.

HTML

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

CSS

.file-upload {
    width:300px;
}
#file-input{
    display:none;
}
.file-upload label {
    cursor:pointer;
    background:#36c;
    border-radius:3px;
    padding:10px 25px;
    color:#fff;
    font-weight:bold;
    text-align: center;
}
.file-upload label:hover {
    background:#fc0;
}
#file-name {
    margin-top:20px;
    color:#f00;
}

Jquery

$(document).ready( function() {
    $("#file-input").change(function(){
         var filename = $(this).val().replace(/.*\\/, "") || 'Файл не выбран';
         $("#file-name").html(filename);
    });
});

Пример