Форма обратной связи с прикреплением файла html

Форма обратной связи с прикреплением файла html

Форма обратной связи с прикреплением файла (attach)

Самый простой внешний вид формы обратной связи с тремя полями и полем для прикрепления файла:

Даже добавим пару правил для стилей, чтобы форма была понятного вида:

Самое главное содержимое файла mail.php

Содержимое файла mail.js , перед подключением этого файла, подключаем jQuery.

Затем скрипт mail.js

Комментарии (16) к “Форма обратной связи с прикреплением файла (Send attachments with PHP Mail())”

Дмитрий

Доброго времени ! Форма просто супер, даже без танцев с бубном, как это обычно бывает .

Подскажите а как сделать чтобы и людям, отправившим запрос, приходило письмо к примеру от webmaster@домен
с такими же данными и припиской в конце:

Спасибо за обращение!
В ближайшее время наши сотрудники свяжутся с Вами.
Это сообщение отправлено с сайта (в скобках ссылка на сайт)

Буду очень признателен если поможете. Уже создал папку с закладками вашего блога …

Владимир

Салют!
Благодарю за материал.
Вопрос: Почему не срабатывает оповещение о превышении лимита?
OpenServer Apache 2.4, PHP 5.6

JulieNeuch

День добрый.
Спасибо за ресурс.

Ольга

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

Denis Creative

К сожалению, не подскажу.
Если файл уже находится на внешнем ресурсе, а не на компьютере, тогда может проще просто давать ссылку в письме.

Elena

Почему-то файлы в pdf не отправляются((

Denis Creative

А в другом формате отправляются?

Elena

Картинки jpg отправляются, другие не смотрела форматы…

Denis Creative

Не знаю, в коде формы нет никакого фильтра по форматам файлов. Возможно настройки хостинга, можете обратиться в ТП хостинга, может они помогут, если сама форма работает и другие форматы отправляет.

Владимир

Почему приходят пустые файлы? т.е. весят 0 байт

Denis Creative

Тестировал на разных сайтах и серверах, проблем не замечал, главное, не менять код, потому как при попытке “красиво отформатировать” файл mail.php – он совсем переставал работать. Поэтому попробуйте поменять только адресата и отправителя, а сам код не изменять.

Владимир

Так и делаю, все равно приходит пустой файл, и еще не приходят другие данные с формы (имя,емаил,о проекте), т.е. в письме только файл(пустой) и ip отправителя

Читайте также:  Как выключить ускорение мыши в windows 10

Denis Creative

Может какие-то настройки хостинга, точно не скажу, не сталкивался…
Попробуйте, если есть возможность, свой код на другом сервере.

Владимир

Буду разбираться, но все равно Спасибо за помощь

Владимир

Очень странно, на почте gmail все работает отлично, вот на яндекс.почте все именно так как я описывал

В этой статье вы узнаете, как создать форму обратной связи (мы будем получать email пользователя), которая предоставляет пользователю возможность прикрепить и отправить на сервер свой файл. Также в этой статье вы узнаете, как проверить тип и размер загруженного файла.

Html формы с полем отправки файла

Html формы с полем отправки файла представлен ниже. При клике по кнопке " browse " пользователь получает возможность выбрать файл на своей локальной машине.

Форма будет выглядеть следующим образом:

Обратите внимание, что в атрибутах формы мы указали enctype="multipart/form-data" . Это скажет браузеру, что форма может быть использована для отправки файлов. Также мы добавили поля " name " и " email " с целью собрать как можно больше информации о пользователе. Затем идет поле отправки файла.

При клике по кнопке submit , данные, включая данные о посылаемом файле, отправятся в файл-обработчик, путь к которому мы указали в атрибуте формы action .

Получаем информацию о загруженном файле

Сперва мы проверим полученные данные, затем, в случае успешной проверки, отправим данные на электронную почту.

Всю информацию о загруженных файлах можно получить при помощи массива $_FILES .

Содержимое массива $_FILES для нашего примера приведено ниже. Обратите внимание, что значение атрибута name (у нас оно равно uploaded_file ) в поле выбора файла может быть любым.

  • $_FILES[‘uploaded_file’][‘name’]
    Оригинальное имя файла на компьютере пользователя.
  • $_FILES[‘uploaded_file’][‘type’]
    Mime-тип файла, в случае, если браузер предоставил такую информацию. Пример: "image/gif". Этот mime-тип не проверяется в PHP, так что не полагайтесь на его значение без проверки.
  • $_FILES[‘uploaded_file’][‘size’]
    Размер в байтах принятого файла.
  • $_FILES[‘uploaded_file’][‘tmp_name’]
    Временное имя, с которым принятый файл был сохранен на сервере.
  • $_FILES[‘uploaded_file’][‘error’]
    Код ошибки, которая может возникнуть при загрузке файла. Этот элемент был добавлен в PHP 4.2.0

Получаем имя, тип и размер загруженного файла:

Читайте также:  Как отключить групповой чат

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

Проверяем размер и тип расширения загруженного файла

Предположим, что получаемый файл должен быть изображением (" jpg ", " jpeg ", " gif ", " bmp ") и не должен превышать 100 Kb. Тогда наш код будет выглядеть так:

В вышеприведенном коде мы проверяем размер и тип файла. Максимально допустимый размер файла равен 100 KB ( $max_allowed_file_size ). Массив $allowed_extensions содержит названия всех допустимых расширений файла. Таким образом, расширение файла проходит проверку на соответствие значениям массива $allowed_extensions . При обнаружении ошибок переменной $error присваивается соответствующая запись.

Копируем загруженный файл

Пришло время отправить загруженный файл на почту администратора.

Сперва мы должны скопировать файл в папку на сервере. (По окончанию работы скрипта, в случае, если принятый файл не был переименован или скопирован в новую папку, он будет автоматически удален из временной папки.)

Копируем загруженный файл в папку ‘ uploads ‘. Если вы хотите переименовать папку ( uploads ), обновите переменную $upload_folder .

Убедитесь, что папка ‘ uploads ‘ имеет права доступа 777. Файл сохранен на вашем сервере, и вы можете обратиться к нему в любой момент.

Отправляем письмо

Составим и отправим письмо на электронную почту администратора сайта (или кому хотите). Для отправки и компоновки письма будем использовать pear library (инструкцию по установке смотрите ниже). Pear классы PEAR::Mail и PEAR::Mail_Mime используются для отправки электронной почты с прикрепленными файлами.

Для начала мы должны подключить файлы pear library для этих классов:

Ниже приведен код компоновки и отправки письма:

Класс Mail_mime() поможет в создании MIME послания. В приведенном выше коде мы создали объект Mail_mime , обновили тело письма ( $message->setTXTBody($text); ) и добавили прикрепленный файл ( $message->addAttachment(file) ).

Прежде чем использовать классы PEAR необходимо установить PEAR на вашем сервере. Вот быстрый способ установить PEAR:
Скачайте инсталлятор PEAR

Сохраните файл как " pear-installer.php ". Загрузите этот файл на ваш сервер в любой каталог. Затем пропишите путь к файлу в вашем браузере:
http://www.yourdomain.com/pear-installer.php
Появится веб-интерфейс для установки PEAR на вашем сайте. Следуйте инструкции по установке. После установки Pear, найдите и установите пакеты " mail " и " mail_mime ".

Читайте также:  Создать емайл бесплатно без регистрации

Простая форма с загрузкой, скачать

Архив содержит простую форму с отправкой загруженного файла на почту.

(Обновлено 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 файл для обработки массива из нескольких файлов:

Ссылка на основную публикацию
Adblock detector