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

Question

[BVADNK]

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


У меня сейчас стоит плагин для файлов но выводится вот так:

(при нажатии на этот текст, открывается меню загрузки файла)

Answer 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;
}

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

Comments

[BVADNK]

Спасибо, а как подключить к этому возможность загрузки нескольких файлов и определенного расширения?

Сейчас я использую плагин Drag and Drop Multiple File Upload - Contact Form 7
и сам код в форме выглядит так:
Ви можете завантажити невеличкий цифровий файл для прорахунку
[mfile upload-file-110 limit:1000000000 filetypes:jpeg|jpg|png|pdf min-file:1 max-file:3]

[Артём Колосов]

BVADNK, в коде у вас уже указаны необходимые настройки, судя по документации.
filetypes - разрешенные типы файлов, max-file - максимальное количество файлов (но загружать необходимо с помощью ctrl как я понимаю, т.е. выделением сразу нескольких файлов, только предположение, не более. Можно написать об этом аккуратно, чтобы посетители сайта понимали, как это работает).

Что касается стилизации - попробуйте изменить код на этот. Не уверен, что CF7 не подставляет свои лейблы и дивы, если так - необходимо изучать документацию плагина. Более к сожалению ни чем не помогу, увы, это плагин, а значит более целесообразно написать разработчику или обратиться на биржу фриланса за помощью.

<label for="file-upload" class="custom-file-upload">
    Загрузка файла
</label>
[mfile upload-file-110 limit:1000000000 filetypes:jpeg|jpg|png|pdf min-file:1 max-file:3]

[BVADNK]

cerbiz_kolosov, Спасибо за ответ.

Еще, чайнику подскажите.
Скрываем стандартное поле в стилях - это я делаю в CSS файле в корне темы?

Стилизуем наше "псевдо-поле"
Это так же в CSS файле в корне делается?

Спасибо

[Артём Колосов]

BVADNK, да, всё в стилях. Чтобы стилизовать данное поле - необходимо задать ему класс (в данном случае лейблу).
Лучше обратитесь на биржу, вам за приемлемую сумму всё сделают в течении часа)