Как скрыть кнопку выбрать файл

Обновлено: 07.07.2024

Как скрыть блок, нажав по кнопке, необходимые условия и пример с кодом.

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

Во внутрь дива поместим ид, в стили поставим бордюр, чтобы видеть, где наш блок: style="border:1px solid black;"
На кнопку повесим onclick и прямо внутри onclick, поместим getElementById
Обратимся к выше анонсированному ид(example) и отправим туда через style свойство display='none'

<div style="border:1px solid black;">Наш первый пример</div>

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

Как скрыть блок, который не виден, либо был скрыт ранее, возьмем код из первого примера и изменим ид, он должен быть уникальным!

И в стили будем добавлять style.display='none' , в свойствах блока сделаем стили none

<div style="border:1px solid black; display:none;">Наш первый пример</div>

Скрыть показать блок по клику

Следующим пунктом соединим первые два - и у нас получится самый первый скрипт - скрыть-показать блок по клику, нажав по кнопке!

У нас получится две кнопки и один блок.

1. Когда нам требуется скрыть блок, то кнопка Показать(example_2_1) не видна.

Нажимаем по кнопке Скрыть, и вешаем сразу три getElementById на onclick - в блок отправляем none, в саму кнопку, на которую нажали тоже отправляем none, а в кнопку показать отправляем block

2. Когда мы видим кнопку Показать - значит наш блок скрыт! Теперь на кнопку Показать, вешаем также 3 getElementById, в саму кнопку показать => none, а на Скрыть и блок отправляем => block
3. Искушенному пользователю( с другой стороны искушенный, что здесь будет делать!?) может показаться данный слишком вульгарным! Но когда ваш проект начинается разрастаться ло огромных размеров, а кнопку надо нарисовать здесь в одном месте, чтобы потом не бегать и не напрягать последнюю прямую извилину, где эта хрень сидит! Со стилями с html кодом, с js и все в разных местах.

<div style="border:1px solid black; display:block;">Наш первый пример</div>

Привет, друзья. Давно просят сделать статью о том, как стилизовать input с type file, то есть поле для прикрепления файла. Однажды, косвенно я затрагивал эту тему в одной из статей, но сегодня мы остановимся на ней подробнее.

Конечно, как обычно есть несколько путей решить эту задачу. Это:

Использовать фреймворк, такой как Bootstrap, Foundation и подобные.
Попробовать самостоятельно стилизовать при помощи JS и CSS.
Воспользоваться плагином для стилизации поля с типом «file».

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

Остается попробовать самостоятельно привести все в порядок или воспользоваться плагином. Давайте остановимся на этих 2 вариантах подробнее, чтобы у вас больше не возникало вопросов как всё-таки стилизовать тег input с атрибутом type=file. Я подробно опишу вариант самостоятельной стилизации, а в конце дам ссылку на плагин, который делает практически тоже самое.

Самостоятельная стилизация тега input с типом «файл»

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

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

Итак, обычно я оборачиваю все инпуты и элементы, которые относятся к ним в общий контейнер. Мне так удобней, легче верстать, позиционировать и стилизовать.

Как я уже и говорил, мы будем отслеживать клик по label, который связан с инпутом, при этом само поле, которое предназначено для отправки файла мы скроем, задав ему прозрачность «0».

Вот так сейчас выглядит поле в браузере:

Добавим стили, чтобы получить описываемый результат. То есть скроем input, оставим только label, поместим в него иконку и сделаем его похожим на обычную кнопку, но сначала, добавим кое-что в верстку:

Теперь добавим стили:

Вот что получилось:

Как видите, уже лучше, но пока мы не видим никакой реакции на то, что файл выбран. Нет никакого уведомления и никакой индикации. Давайте исправим это. Под формой, ближе к закрывающему тегу body добавьте следующий скрипт:

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

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

Стилизация «input type file» при помощи плагина

Теперь давайте рассмотрим вариант стилизация поля для отправки файла при помощи jQuery плагина. Называется он jQuery Fileinput. Как я уже говорил, делает он практически тоже самое, просто автоматически.

Для настройки сначала подключаем сам плагин и jQuery:

Затем создаем input:

И инициализируете плагин:

После инициализации сам инпут скроется, а на его месте появится кнопка.

Чтобы задать ей свой класс и поместить в нее свой текст, нужно передать в fileinput html. Например так:

Для наглядности, смотрите пример на jsfiddle, а на сегодня все. Надеюсь, что у вас больше не осталось вопросов по поводу того, как стилизовать input с type fifle.

10 комментариев

Годнота, спасибо, я просто делал всегда рамку вокруг инпута и центрировал его. Вообще есть много споров по поводу того, стоит ли индивидуализировать этот и другие элементы, или оставить так, как многие уже привыкли, то есть по умолчанию и одинаково +- во всех браузерах.

Что делает multifile-upload-field-for-contact-form-7? Если просто добавляет enctype='multipart/form-data', то попробуйте добавить этот параметр скриптом обычным, а не плагином.

Отличная стилизация Input. Давно искал такой вариант дизайна. Но при попытке передать файл на сервер, у меня появилась ошибка «Не удалось открыть поток: отказано в доступе». Что я сделал?
Я загуглил эту тему и вот что нашел. Может кому то пригодиться.
1. Узнайте код ошибки php. Поместите этот код в начало файла php.

2. К папке должен быть доступ 777. Проверь это.
3. Тег form должен иметь атрибут enctype = "multipart/form-data" method = "post".

4. Полностью открой и посмотри массив $ _FILES на сервере.

5. Открой и посмотри массив $ _FILES на клиенте.

6. Проверь права пользователя и группы пользователей на каталог.

Aleksey, спасибо, что не оставили без внимания и дали такой развернутый ответ. Кому-то обязательно пригодится!

Доброго времени суток. Оформил по данному примеру кнопку отправки.
Прошу прощения за, может быть, тупой вопрос, но.
Как получить вложенные файлы на почту? Если с остальными полями понятно
[tel* tel-136] выведет телефон который введет пользователь и т.д.
Но что в данном случае вставить в поле "Прикрепленные файлы", чтобы файл пришел на почту?
Еще раз прошу прощения, за может быть примитивный вопрос.

Я впервые сталкиваюсь вообще с отправкой файлов с формы. Все сделал по инструкции с поста, но так и не понял в какой папке хранятся файлы отправленные с формы cf7. На самом деле, проблема была только в стилизации кнопки отправки файлов, но более разумного решение, чем тут, не нашел. И стилизовал так как нужно, но столкнулся с рядом вопросов, с которыми ранее не сталкивался. В какую папку сохраняются файлы? Где их можно найти? Тыкните носом, пожалуйста.

1.Узнаем имя файла.
2.Берем сам файл.
3.Путь (папка) на сервере куда будет скопирован файл.
4.Перемещаем файл с браузера на сервер.

Я думаю, что многих, как и меня, не совсем устраивает стандартный вид поля загрузки файлов. Помимо того, что оно, грубо говоря, некрасивое, так еще и в разных браузерах выглядит по-разному.

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

Для решения задачи нам поможет тег label, который связывает текст и прочие элементы с элементами формы (в нашем случае – с кнопкой), jQuery (который поможет нам получить необходимую информацию о выбранных файлах – имена и их расширение) и дополнительное поле input, где мы будем непосредственно хранить нашу информацию о файлах.

1. Первое, что вам потребуется – это само поле с выбором файла. Код его следующий:

И выглядит все это пока так:

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

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

Код желательно вставить перед закрывающим тегом </body>. И смотрим, что у нас получилось:

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

3. Для этого напишем небольшой CSS-стиль:

Все это сохраняем и любуемся результатом:

По-моему, очень неплохо.

Возможные ошибки в работе этого метода

Из так называемых проблем, по которым этот способ может у вас не сработать, – это отсутствие библиотеки jQuery (очень частая проблема статичных сайтов). Решается следующим способом.

Перед закрывающим тегом </head> подключите библиотеку:

Хочу подчеркнуть, что, в отличие от подобных инструкций на других сайтах, моя – более простая и к тому же может работать с множеством фалов в вашем поле (в таком случае все выбранные файлы в поле будут указываться через запятую).

(21)
а в цикле не лучше ? что-то типо такого:

P.S. не проверял в конфигураторе - но по памяти должно работать )
компактный и более универсальный метод как по мне (что б не прописывать видимость ложь для новых кнопок постоянно

(1)Ну во первых убрать Автозаполнение в свойствах командной панели..Возможно уберете все что нужно, А так многие кнопки добавляются программно
В при создании на сервере
(7) отключил авто заполнение создал на сервере, результат тот же понять не могу почему эдо кнопку видит а остальные нет ?

Пройтись в цикле по элементам формы и кого родитель = Элементы.ФормаКоманднаяПанель, т.е. относятся элемент к данной командной панели. Сделать рекурсию, и получить вложенности. И уже выбирать, что нужно спрятать, что нет – прятать видимость.

.
МассивПодчин = новый Массив; // можно дерево сделать
ПолучитьВсеПодчин(Элементы.ФормаКоманднаяПанель, МассивПодчин)
.

Процедура ПолучитьВсеПодчин(Родитель, МассивЭлементов)
Для Каждого Элем из Элементы Цикл
Если Элем.Родитель = Родитель тогда
МассивЭлементов.Добавить(Элем);
ПолучитьВсеПодчин(Элем, МассивЭлементов);
КонецЕсли;
КонецЦикла;
КонецПроцедуры;

(8)Почему так сложно ? проще нельзя например элемент.видимость = ложь ? (12) так я же написала менять видимость, т.е. имела ввиду - элемент.видимость = ложь. а алгоритм я описала выше как получить программно все кнопки командной панели(с учетом всех вложенностей), решила вам это тоже требуется.. (16)Извините за очень глупый вопрос я добавил процедуру а дальше с этим

(17) разные вариант могут быть. к примеру, вы знаете кнопки которые надо оставить точный перечень, точно знаете их наименование. создать их список, и если получаемые кнопки не в списке, то скрываете видимость. т.е. не создаете массив, а пряма в процедуре, если полученный элемент не в списке, то прячете его видимость.
--
СписокНужных= новый Список; // добавляете элементы, группы если подменю к пример целое надо оставить(т.е. не надо все элементы подменю перечислять)
.
ПолучитьВсеПодчин(Элементы.ФормаКоманднаяПанель, СписокНужных)
.

Процедура ПолучитьВсеПодчин(Родитель, СписокНужных)

Для Каждого Элем из Элементы Цикл
Если Элем.Родитель = Родитель тогда
Если СписокНужных.НайтиПоЗначению(Элем) = Неопределено тогда
Элем.видимость = Ложь;
Иначе
ПолучитьВсеПодчин(Элем, МассивЭлементов);
КонецЕсли;
КонецЕсли;
КонецЦикла;

(19) не знаю я без отладки писала выше, на обработке вот попробовала все ок.. как вариант может не все виды элементов можно спрятать, можно виды эти пропустить прописать, а можно прще, через попытку сделать)

СписокНужных = новый СписокЗначений;
ПолучитьВсеПодчин(ЭтаФорма, СписокНужных);

&НаСервере
Процедура ПолучитьВсеПодчин(Родитель, СписокНужных)

Для Каждого Элем из Элементы Цикл
Если Элем.Родитель = Родитель тогда
Если СписокНужных.НайтиПоЗначению(Элем) = Неопределено тогда
Попытка
Элем.видимость = Ложь;
Исключение
КонецПопытки;
Иначе
ПолучитьВсеПодчин(Элем, СписокНужных);
КонецЕсли;
КонецЕсли;
КонецЦикла;

Читайте также: