форма для отправки файла html
Загрузка файлов
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах 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 несколько изменился вид поля.
Форма обратной связи с вложением (прикрепляется файл) | 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 удалять не стоит. Смотрите какое именно правило не даёт работать форме. Его (правило) можно ограничить одной страницей, расширением файла и т.п.
Отправка данных формы
| Предварительные знания: | Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера. |
|---|---|
| Задача: | Понять, что происходит при отправке данных формы, в том числе получить представление о том, как данные обрабатываются на стороне сервера. |
Куда отправляются данные?
Здесь мы обсудим, что происходит с данными при отправке формы.
О клиентской/серверной архитектуре
WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.
Примечание: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».
На стороне клиента: определение способа отправки данных
Атрибут action
Этот атрибут определяет, куда отправляются данные. Его значение должно быть действительным URL. Если этот атрибут не указан, данные будут отправлены на URL-адрес страницы, содержащей форму.
В этом примере данные отправляются на абсолютный URL — http://foo.com :
Если атрибуты не указаны, как показано ниже, данные из формы отправляются на ту же страницу, на которой размещается данная форма:
Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут action был обязательным. Это больше не нужно.
Атрибут method
Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.
Метод GET
Рассмотрим следующую форму:
HTTP-запрос имеет следующий вид:
Примечание: вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).
Метод POST
Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.
Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.
Примечание: вы можете найти этот пример на GitHub — смотрите post-method.html (see it live also).
Просмотр HTTP-запросов
HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):
Затем вы можете получить данные формы, как показано на рисунке ниже.
Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:
На стороне сервера: получение данных
Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.
Пример: Чистый PHP
Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).
Пример: Python
Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется Flask framework для визуализации шаблонов, поддерживающих форму отправки данных (смотри python-example.py).
Два шаблона из коде выше взаимодействуют так:
Другие языки и фреймворки
Примечание: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом.
Особый случай: отправка файлов
Отправка файлов с помощью форм HTML — это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.
Атрибут enctype
Если хотите отправить файл, нужно сделать следующие три шага:
Предупреждение: Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.
Проблемы безопасности
Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.
В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:
XSS «Межсайтовый скриптинг» и CSRF «Подделка межсайтовых запросов»
Межсайтовый скриптинг (XSS «Cross Site Request Forgery») позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Подделка межсайтовых запросов (CSRF «Cross-Site Scripting») может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же политика происхождения. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.
Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный «фильтр», который удаляет элементы HTML
FoggyK / Lesson_6PHP.md
Принципы загрузки фалов через форму
Функционал, отвечающий за отправку файлов на сервер, реализуется довольно просто. Как и в примерах из предыдущих уроков, за это отвечает специальное поле формы. Но ее настройка имеет некоторые особенности.
Если ваша форма содержит поля, отвечающие за загрузку файлов, то элементу
Использование поля загрузки файлов
При нажатии кнопки откроется проводник файловой системы. В нем можно перемещаться по директориям компьютера. Интерфейс интуитивно понятен любому пользователю. Все что нужно сделать — это найти нужный файл и нажать кнопку «Открыть». Отметим, что выбирать нужные документы и файлы может только сам пользователь. Явное указание атрибута value с именем или расположением какого-либо файла не приведет к успеху.
Чтобы выбранный файл был загружен при отправке формы, полю необходимо добавить атрибут name с уникальным значением.
Множественный выбор и блокировка поля
Принципы загрузки файлов
Загрузка файла на сервер может быть выполнена как с помощью веб-формы, расположенной на странице сайта, так и прямым программным запросом. Для PHP-интерпретатора способ передачи файла не имеет значения. Спецификация HTTP-протокола приводит эти операции к единообразному виду.
Перемещение загруженного файла
Как говорилось выше, загружаемые файлы размещаются во временной директории сервера и автоматически удаляются PHP-интерпретатором после выполнения текущего запроса. Их можно сохранить, переместив в другое место. Использовать стандартные функции copy() или rename() крайне нежелательно.
С помощью функции is_uploaded_file() вы можете проверить, является ли файл загруженным в текущем запросе. Она принимает всего один параметр — имя файла, а возвращает результат логического типа.
Важно
PHP позволяет изменять местоположение загруженных файлов с помощью обычных функций копирования или перемещения. Однако это довольно опасно. Существует ряд ухищрённых атак, основанных на таком недальновидном подходе.
Пример загрузки файла на сервер
Как создать форму обратной связи с возможностью загрузки и отправки файла на почту PHP
В этой статье вы узнаете, как создать форму обратной связи (мы будем получать email пользователя), которая предоставляет пользователю возможность прикрепить и отправить на сервер свой файл. Также в этой статье вы узнаете, как проверить тип и размер загруженного файла.
Html формы с полем отправки файла
Html формы с полем отправки файла представлен ниже. При клике по кнопке » browse » пользователь получает возможность выбрать файл на своей локальной машине.
Форма будет выглядеть следующим образом:
Получаем информацию о загруженном файле
Сперва мы проверим полученные данные, затем, в случае успешной проверки, отправим данные на электронную почту.
Получаем имя, тип и размер загруженного файла:
Проверяем размер и тип расширения загруженного файла
Предположим, что получаемый файл должен быть изображением (» jpg «, » jpeg «, » gif «, » bmp «) и не должен превышать 100 Kb. Тогда наш код будет выглядеть так:
Копируем загруженный файл
Пришло время отправить загруженный файл на почту администратора.
Сперва мы должны скопировать файл в папку на сервере. (По окончанию работы скрипта, в случае, если принятый файл не был переименован или скопирован в новую папку, он будет автоматически удален из временной папки.)
Убедитесь, что папка ‘ uploads ‘ имеет права доступа 777. Файл сохранен на вашем сервере, и вы можете обратиться к нему в любой момент.
Отправляем письмо
Составим и отправим письмо на электронную почту администратора сайта (или кому хотите). Для отправки и компоновки письма будем использовать pear library (инструкцию по установке смотрите ниже). Pear классы PEAR::Mail и PEAR::Mail_Mime используются для отправки электронной почты с прикрепленными файлами.
Для начала мы должны подключить файлы pear library для этих классов:
Ниже приведен код компоновки и отправки письма:
Прежде чем использовать классы PEAR необходимо установить PEAR на вашем сервере. Вот быстрый способ установить PEAR:
Скачайте инсталлятор PEAR
Сохраните файл как » pear-installer.php «. Загрузите этот файл на ваш сервер в любой каталог. Затем пропишите путь к файлу в вашем браузере:
http://www.yourdomain.com/pear-installer.php
Появится веб-интерфейс для установки PEAR на вашем сайте. Следуйте инструкции по установке. После установки Pear, найдите и установите пакеты » mail » и » mail_mime «.
Простая форма с загрузкой, скачать
Архив содержит простую форму с отправкой загруженного файла на почту.