отправка формы с файлом на почту ajax
Скрипт формы обратной связи с прикреплением файла (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-форму без перезагрузки страницы
Что такое AJAX
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax
Здесь мы создадим демо-проект, который будет включать в себя 3 файла:
Создайте первый файл под названием index.php с таким содержимым:
Выводы
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.
Отправка письма с вложениями на PHP и AJAX
Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы.
HTML-код формы
Добавляем в форму ещё одно поле файл:
JavaScript код с jQuery Ajax
Не забудьте перед кодом подключить библиотеку jQuery!
PHP обработчик
Файлы, которые будут отправлены, необходимо закодировать в формат base64 и указать в заголовках информацию о том, что в письме присутствуют файлы.
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее
Статья Форма обратной связи с использованием AJAX, отправкой сообщения по почте и возможностью прикрепить файл
Обновление от 18.09.2015 : изменён исходный код примера – теперь не нужно перезагружать страницу даже если через форму отправляется файл.
Это небольшой урок, в котором мы будем делать форму обратной связи. После того, как пользователь заполнит необходимые поля, введённые данные будут отправляться на сервер посредством AJAX-запроса. Если данные невалидные (например, отсутствуют обязательные для заполнения поля), то соответствующее сообщение будет показано пользователю.
К отправляемому сообщению пользователь может присоединить файл. В PHP коде показано, как происходит отправка писем с или без приложенного файла.
Я знаю, что в Интернете огромное множество готовых решений, в том числе с очень красивыми формами. Более того, значительная часть этого кода была «подсмотрена» у других. Главная цель написания статьи — систематизировать собственные знания о функции отправки почты в PHP-скрипте. Если кому-то моя заметка пригодится и сэкономит время, то я буду очень рад.
Если вы сразу хотите самим всё попробовать, то здесь вы можете скачать исходный код файлов для этого урока.
Кстати, для тестирования отправки почты на локалхосте незаменимой станет почтовая заглушка. Поэтому рекомендую посмотреть статью «Почта на локальном сервере — установка почтовой заглушки».
Я разделил код на два файла: файл с формой и файл обработчик/отправитель письма. Конечно, можно всё собрать в один файл, но для образовательных целей лучше полностью разделить PHP и HTML код для наглядности.
Одной её уже достаточно, чтобы принять и отправить сообщение на сервер. Я не буду останавливаться на описании полей — т.к. это совсем просто.
Дмитрий
Воскресенье на 08:03 ПП
здравствуйте для такого html
КОНТАКТНЫЕ ДАННЫЕ
отправить
правильний такой php
Татьяна
Воскресенье на 10:03 ПП
Здравствуйте, у меня на сайте имеется обычная форма обратной связи, т.е.: имя, email и сообщение, и пользователю приходит на почту письмо с содержимым самого сообщения, именем и email отправителя. Подскажите, пожалуйста, как в эту форму на сайте добавить возможность прикрепить также и файл, сразу под сообщением?
Заранее благодарю.
mihailind
Среда на 11:03 ДП
Форма с ошибками и в php и в js, даже полностью скопировав оказалась не рабочей! вообще не понимаю к чему интернет захломлять такими костылями! не пожалел времени зарегиться и скать вам об этом! если делаете что-то делайте правильно а не как получиться
Валидация и отправка файлов на сервер с помощью ajax
Сегодня я хочу рассказать, как отправить файлы на сервер из html-формы. Обычно эта процедура не вызывает никаких затруднений: кодировка multipart/form-data у формы, input type=»file» и все. Остается принять файлы на сервере и скопировать их в нужное место.
Но мы сделаем интереснее, отправим файлы с помощью ajax, без перезагрузки страницы. А также посмотрим, как валидировать файлы на клиенте и сервере, а именно проверять максимальный размер загружаемых файлов и допустимые расширения.
Суть задачи
По итогу статьи у нас получится небольшое приложение, которое отрисует форму с тремя полями ввода и кнопкой Отправить. Будем считать, что мы хотим получить от пользователей три файла-картинки. При этом нужно задать максимальный размер загружаемых файлов и ограничить набор расширений. Проверять файлы нужно как на клиенте, для удобства пользователей, так и на сервере, для защиты от возможных атак. Если обе проверки пройдены, то скопируем файлы на сервере в папку upload.
Для нетерпеливых сразу ссылки на демо приложения и исходники
Подготовим шаблон проекта.
В корень проекта положим файл index.html, в папку js файлы jquery.min.js и main.js (не забудем их подключить в index.html). Серверный код будет выполнять upload.php из папки php, а для полученных файлов создадим папку upload.
Получится так: 
html-заготовка формы
Создадим простейшую форму в index.html
Базовый клиентский код
Валидацию пока не делаем, рассмотрим ее ниже. А пока переходим к серверной части.
Принимаем файлы на сервере и перемещаем в нужную папку
Код обработки файлов на сервере довольно типовой, сначала привожу его, а потом кратко поясню
В принципе, чтобы просто отправить файлы на сервер, приведенного кода достаточно. Но при этом у нас нет никаких средств для проверки правильности выбранных файлов и защиты от атак. Поэтому дальше займемся валидацией файлов на клиенте и сервере. Начнем с клиента.
Валидация файлов на клиенте
Например, ошибка может выглядеть так.
Это означает, что в input[0] (в первом по счету поле) пользователь добавил файл test.pdf, формат которого не поддерживается, так как мы просим изображения. Это одна ошибка валидации. А массив таких ошибок и будет результатом выполнения функции. Если ошибок нет, все файлы выбраны и заданы правильно, то вернем пустой массив.
Впрочем, сейчас посмотрим, как это работает. Добавим функцию валидации validateFiles.
Мы перебираем массив файлов и последовательно делаем проверки. Сначала смотрим, выбран ли вообще файл. Если нет, добавляем в результирующий массив ошибок пукнт с кодом no_file. Это будет объект-ошибка
Обратите внимание, если в одном файле ловится несколько ошибок (максимум две в нашем случае), например, test.pdf слишком большого веса, то в результате мы получим 2 объекта. Имеет смысл группировать эти ошибки по имени файла, но не хочется усложнять код. В конце концов, если это необходимо, Вы сможете обработать выводимый результат как угодно.
Функцию написали, осталось задействовать ее в основном потоке кода. Немного расширим код submitForm:
Как видим, мы добавили вызов validateFiles с нужными параметрами. Максимальный размер файла ограничим 2 Мб, а типы возьмем jpg и png-картинки. После вызова проверяем, не пустой ли массив полученных ошибок, и если таки не пустой, то выводим результаты в консоль и выходим из функции сабмита. Файлы на сервер не уйдут.
Клиенсткий код закончен, можете побаловаться с файлами, добавить или убрать форматы разрешенных типов или изменить максимальный размер. Наш клиентский код должен точно реагировать на все попытки загрузить «неправильные» файлы. А мы переходим к валидации на стороне сервера.
Валидация файлов на сервере
Вообще для посетителей сайта будет срабатывать клиентская валидация. Тем самым наши посетители получат мгновенную обратную связь, а сервер освободится от ненужной работы. Но в случае получения пользовательских данных всегда нужно проводить дополнительную валидацию на стороне сервера. Этим мы и займемся.
php-шная функция валидации будет проверять ровно те же параметры, что и клиентская. Но кроме двух пунктов: проверки на наличие файла и возврат индекса. Это связано с тем, что мы проверяем все файлы пришедшие с клиента и не знаем, что некоторые клиент мог не заполнить. Лучше увидеть на примере. Напишем саму функцию
Обращаю внимание, что для синхронизации клиента и сервера в обеих функциях валидации используется одинаковый формат объекта-ошибки и коды ошибок. Это облегчит нам обработку ошибок в интерфейсе независимо от того, сработала ли валидация клиентская или серверная.
После этого остается использовать написанную функцию в основном коде
Вот и все. Как видим, валидация на сервере подключена ровно таким же способом, как и на клиенте.
Чтобы убедиться, что и серверная валидация успешно работает, закомментируйте одну строку в main.js
Теперь попробуйте ввести в форму ошибочные данные и увидите, что в консоли выпадет сообщение «client validation errors:» с массивом ошибок от клиентской валидации, а следом «responce from server:» с ошибками от серверной. Ошибки должны быть совершенно идентичными, за исключением no_file на клиенте и отсутствия поля index на сервере.