Как сделать кнопку прикрепить файл
Загрузка файлов
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).
Рис. 1. Вид поля для загрузки файла в Firefox
Рис. 2. Загрузка файлов в Chrome
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| accept | Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. |
| size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. |
| multiple | Позволяет выбирать и загружать сразу несколько файлов. |
| name | Имя поля, используется для его идентификации обработчиком формы. |
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
HTML5 IE Cr Op Sa Fx
Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
| Значение | Описание |
|---|---|
| image/jpeg | Только файлы в формате JPEG. |
| image/jpeg,image/png | Только файлы в формате JPEG и PNG. |
| image/* | Любые графические файлы. |
| image/*,video/* | Любые графические и видеофайлы. |
Использование дополнительных атрибутов показано в примере 2.
Пример 2. Загрузка фотографий
HTML5 IE 10+ Cr Op Sa Fx
Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.
Как стилизовать поле для отправки файла
Привет, друзья. Давно просят сделать статью о том, как стилизовать input с type 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.
Похожие публикации
5 комментариев
Годнота, спасибо, я просто делал всегда рамку вокруг инпута и центрировал его. Вообще есть много споров по поводу того, стоит ли индивидуализировать этот и другие элементы, или оставить так, как многие уже привыкли, то есть по умолчанию и одинаково +- во всех браузерах.
Что делает 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».
6. Проверь права пользователя и группы пользователей на каталог.
Aleksey, спасибо, что не оставили без внимания и дали такой развернутый ответ. Кому-то обязательно пригодится!
Скрипт формы обратной связи с прикреплением файла (php + ajax)
(Обновлено 26.06.2018)
Данный скрипт идеально подойдет для форм при создании сайтов-визиток, каталогов, лендингов, где нужно отправить простую форму с прикрепленным файлом.
В скрипте используется проверка заполненности обязательных полей с помощью скрипта jquery.validation с последующей отправкой сообщения на e-mail администратора без перезагрузки страницы с помощью технологии ajax.
Демо-страницу можно посмотреть – тут.
Рассмотрим работу скрипта на примере:
Дана форма с полями: Имя, Телефон, Е-mail и «Описание заказа».
Код формы:
! В форме, в которой происходит прикрепление файла, обязательно наличие аттрибута enctype=”multipart/form-data”.
Javascript код
Подключаем библиотеки jQuery и плагин валидации на страницу:
Javascript код для валидации и ajax-отправки формы
Разберем более подробно этот код.
Для отправки файлов используется интерфейс FormData. Для кодирования данных метод FormData использует формат “multipart/form-data”. Это означает то, что он позволяет подготовить для отправки по AJAX как текстовые данные, так и файлы. При создании объекта FormData ему можно в качестве параметра указать DOM форму. В этом случае в объект FormData автоматически добавятся все поля (имяПоля:значение) этой формы.
О более детальной работе FormData можно почитать тут.
После загрузки страницы, с помощью строки if(!window.FormData) проверяем доступность данного объекта. В случае, если он не доступен сообщаем об этом пользователю (для демонстрации в коде сообщение выводится алертом, на живом сайте так делать не надо – правильней будет в форме, скрывать поле для загрузки файлов). Это касается совсем старых браузеров. Для всех современных браузеров все будет работать.
При нажатии на кнопку “Отправить” проверяются обязательные поля на заполненность с помощью метода validate и в случае успешной проверки (submitHandler) создается новый объект FormData, происходит вызов скрипта send.php, который и производит отправку форму и прикрепленного к ней файла.
Затем вместо формы выводится сообщение об успешной отправке. За это отвечает строка
PHP-скрипт отправки данных с формы
send.php
Дополнение от 28.12.2016
Отправка формы с прикреплением нескольких файлов
В элементе input, в котором прикрепляем файл, дописываем аттрибут multiple
( ), что даст возможность выбора одновременно несколько файлов.
Изменяем php файл для обработки массива из нескольких файлов:
Форма обратной связи с вложением (прикрепляется файл) | HTML и PHP
Ниже представлены два варианта скрипта отправки данных с сайта на почту: с Javascript (Ajax) и без.
1. Форма связи позволяет отправить несколько изображений и др.файлов без перезагрузки страницы
Файл contacts.html
Файл contacts.php
2. Форма связи в одном файле
Рекомендации к скрипту отправки файлов на почту
Скорее всего письма будут падать в СПАМ папку, поэтому для них нужно создать правило. Скажем, так это делается в Яндекс.Почте: 
Если на хостингах выключена функция mail() (галка может именоваться «sendmail_from»), то скрпт работать не будет. Так как по факту email отправляется с электронного ящика хостинга.
127 комментариев:
Виталий Здравствуйте, подскажите пожалуйста как поставить эту форму на сайт (wordpress). Просто скопировать код и вставить на страницу? Форма отображается, но и первая часть кода, где нужно изменить емаил на свой тоже отображается. Или первую часть кода нужно разместить в файле на сервере? Виталий Положил первую часть кода в файл mail.php и поместил его в папку с темой шаблона, чтобы можно было редактировать из админки.. изменил емаил на свой, но сообщения не приходят. ( Виталий И еще бы хотелось чтобы после отправки сообщения внизу или где нибудь писалось»ваше сообщение отправлено. спасибо» чтобы человек был уверен в отправке..как такое реализовать? NMitra Здравствуйте, я далека от WP. Попробуйте посмотреть папку wp-content/themes/ваша_тема, а именно файл page.php. Сообщение есть и оно появляется, если верно код разместить. Вячеслав Спасибо! Хорошая форма. NMitra Рада слышать! Владимир Телевной Здравствуйте. Ваш сайт безусловно хорош. Форма данная тоже. Но только вот вопрос можно ли реализовать прикрепление нескольких файлов. И желательно чтоб это делалось путем перетаскивания файла на форму. Что то типа этого http://www.manhunter.ru/demo/upload.html (это демонстрация), источник http://www.manhunter.ru/webmaster/712_zagruzka_faylov_peretaskivaniem_v_okno_brauzera.html
Спасибо заранее =) Владимир Телевной P.S.
Желательно чтоб было реализовано все на столько же просто как данная форма. Т.к. я не просто ноль, а ноль с большим минусом. И мои знания ограничиваются копировал-вставил. NMitra Здравствуйте, я боялась этого вопроса )) Пока нет времени написать полноценное решение и толком разобраться. Нужно объединить:
http://habrahabr.ru/post/120370/
http://www.emanueleferonato.com/2008/07/22/sending-email-with-multiple-attachments-with-php/
http://www.w3schools.com/html/html5_draganddrop.asp Владимир Телевной Будем ждать полноценного решения. Спасибо за ответ. Александр Как бы ещё его заставить вызываться в модальном окне? 🙂 NMitra Как содержимое любого модального окна можно сделать, например, этого http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html Александр А как бы подправить форму, чтобы сообщение об успешной отправке было отдельно? дело в том, что при такой форме достаточно нажать F5 и письмо сваливается снова. Так можно и весь ящик замусорить. Ну или проверку какую-нибудь защитную добавить? NMitra Здесь http://shpargalkablog.ru/2014/01/feedback-form.html пример с XMLHttpRequest()
Или посмотрите тут http://shpargalkablog.ru/2013/08/bell-site.html
Анонимный Подскажите как сделать чтобы можно было прикрепить несколько файлов? Анонимный Подскажите как добавить защиту от спама? NMitra Фильтра по IP в большинстве случаев хватает. Чтобы его узнать, следует строку
$message = «Имя: «.$_POST[‘nameFF’].»\nEmail: «.$from.»\nСообщение: «.$_POST[‘messageFF’];
$message = «Имя: «.$_POST[‘nameFF’].»\nEmail: «.$from.»\nСообщение: «.$_POST[‘messageFF’].»\nIP: «.$_SERVER[‘REMOTE_ADDR’];
Затем при обнаружении IP, рассылающего спам
if ($filesize Анонимный Спасибо. Только функцию по проверке веса все-таки тоже хотелось бы иметь. NMitra if ($filesize Анонимный Здравствуйте, письма приходят, но картинки не отображаются, вместо них набор букв-цифр NMitra Здравствуйте, попробуйте упрощённый вариант http://shpargalkablog.ru/2014/05/email-file-php.html Но скорее всего и он не будет работать: проблема или в хостере (именно с его ящика приходят письма), или в почтовом клиенте. У вас где находится почтовый ящик (программа/сервис)? Анонимный весьма полезный блог, спасибо за подробный разбор этой темы, форму с прикреплением файла именно с вашего блога использовала много раз. NMitra Спасибо за отклик! Анонимный Странно, но никто не нашел ошибку скрипта! NMitra Поделитесь, пожалуйста Анонимный Она уже была замечена. Но не донесена должным образом. К сути, если крепишь файл объемом до 1Мб и более 2-х тогда считается сумма файлов в байтах, т.е. она превысит 10000000 если закрепить их по 1-му килобайту. От 1Мб вроде норм. Как обойти этот недочет? Анонимный Так что вы скажите? Каков ваш будет положительный ответ? NMitra Плаваю я в этих байтах. Итак,
килобайт (КБ) = 1024 байта
мегабайт(МБ) = 1024 килобайта
10 МБ = 10485760 байт (тут всё сравнительно верно)
$subject = «Заполнена контактная форма с «.$_SERVER[‘HTTP_REFERER’];
У меня с ними тоже Яндекс режет письма. Александр Стрельченко Здравствуйте еще раз.
Заголовки эти сразу удалил и не использовал.
Оставил только эти два:
PHP Warning: is_uploaded_file() expects parameter 1 to be string, array given in /путь/к/файлу/contacts.php on line 19, referer: http://ваш.сайт
Я делал прикрепление одного файла, а в html мой инпут имел такой вид:
Убрав скобки массива «[]» все заработало, при этом письма доходят моментально и с вложением.
В Вашей статье все грамотно отмечено цветом, что обязательно удалить нужно их, но я зря поторопился)))
Благодарю за Ваше решение!
NMitra Доброго утра, Александр. Большое спасибо, что написали! А то я бы гадала что да как. Кирилл Спасибо огромное Вам за данную форму. Установил. Все работает.
Но. Прошу помочь разобраться в одном недочете.
Ввели все данные, нажали отправить, получаем сообщение:»размер файлов превышает 10 мб».
В этой ситуации из поля «сообщение» пропадает ранее написанный текст. Это нехорошо. В остальных полях информация сохраняется.
Можно с этим что-то сделать? Александр Стрельченко Кирилл, чтобы ранее написанный текст не пропадал, удали эти события:
f.messageFF.removeAttribute(‘value’); // очистить поле сообщения
f.messageFF.value=»; // очистить поле сообщения NMitra Добавила дополнительное условие, попробуйте, при возможности, отпишитесь о результатах, сама не успела потестировать.
.htaccess удалять не стоит. Смотрите какое именно правило не даёт работать форме. Его (правило) можно ограничить одной страницей, расширением файла и т.п.
Полностью своя кнопка «Выбрать файл»
Изучая веб-программирование, я не нашел внятного решения проблемы оформления загрузки файла на сервер при помощи одной кастомной кнопки.
Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input[type=file] для адаптивного сайта… И да — все работает в IE, начиная с 9 версии.
Цель: создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).
Инструменты: CSS, PHP, JavaScript.
Используемые технологии: Ajax, через скрытый iframe.
Преамбула
Из кода для упрощения сознательно выкинуты все процедуры проверки принятого файла и try-catch вызовов функций, так как эти моменты не являются темой данной статьи. Также не охватывается момент по предотвращению звукового сигнала в IE. В работе используем технологию Ajax, подразумевающую, что у нас есть основная страница, осуществляющая взаимодействие с пользователем(front-end) и скрипт на сервере, обрабатывающая наши запросы(back-end)
Технология работы
1. На главной странице создаем «form action» Делаем ей target на скрытый фрейм, который создаем статически (или динамически). Создаем два «input» с типом «file» и «submit», даем им «id», помещаем их в «div», который спрячем со страницы стилем. Все эти элементы не видимы для пользователя и не воспринимают каких-либо его действий.
2. Начинаем «магию». Для «input» с типом «file» на событие по изменению вешаем вызов функции onchange=«LoadFile();».
3. На главной странице создаем кнопку. Навешиваем ей на событие нажатия кнопки мыши вызов функции onclick=«FindFile();».
4. В функции FindFile() имитируем клик на «input» с типом «file». То есть при нажатии на нашу кнопку вызывается стандартный диалог выбора файла. Как только пользователь выбрал файл, срабатывает событие onchange и вызывается функция LoadFile(). В функции LoadFile() имитируем клик на «input» с типом «submit».
5. Форма формирует POST запрос с именем файла к нашему back-end скрипту, который осуществляет все проверки по безопасности и загрузку файла. После этого скрипт вызывает callback функцию главной страницы, которой сообщает о результате выполнения.
Собственно все. Для примера приведены четыре основных файла, код которых приведён ниже:
css/style.css – стили главной страницы
view/upload.php – back-end скрипт загрузки файла
index.php – главная страницы
js/upload.js – front-end скрипты главной страницы
Кроме того, необходим любой файл с картинкой для кнопки buttons/openfile.png
Загружаемые файлы помещаем в директорию ../temp/
Создаем стиль кнопки и скрытого «input».
Здесь все согласно примерам в интернете, валидация файлов изъята: