@BVADNK

Как сделать визуальную картинку загрузки файла?

Здравствуйте, подскажите пожалуйста, как вывести понятную загрузку файла в форму, например как тут:
62920a752b696515044919.png

У меня сейчас стоит плагин для файлов но выводится вот так:
62920a8b58955039363899.png
(при нажатии на этот текст, открывается меню загрузки файла)
  • Вопрос задан
  • 33 просмотра
Решения вопроса 1
Как и с селектами/чекбоксами - инпат "файл" необходимо скрыть, а вместо него скормить браузеру фейковое поле.
<label for="file-upload" class="custom-file-upload">
    Загрузка файла
</label>
<input id="file-upload" type="file"/>


Скрываем стандартное поле в стилях
input[type="file"] {
    display: none;
}


Стилизуем наше "псевдо-поле"

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}


Пример взял со стака.
Конкретно форма, которая вам понравилась - есть тут, можете ориентироваться на стилистику (скрипты дёргать не нужно)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы