Js добавить файл в input
Обновлено: 05.07.2024
Привет, друзья. Давно просят сделать статью о том, как стилизовать 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.Перемещаем файл с браузера на сервер.
Читайте также: