Загрузка файлов на сайт: PHP, AJAX, HTML5 и Drag’n’Drop
Скучные формы загрузки — прошлый век. HTML5 дает возможности, чтобы добавить Drag’n’Drop, а AJAX позволяет загружать файлы без обновления страницы.
Программисту нужно позаботиться о том, чтобы посетитель смог сделать это максимально удобно. Загрузить файл на сайт можно и с помощью обычной формы и обработчика на PHP, но с выходом HTML5 появились другие интересные возможности — в этой статье мы поговорим и о базовых функциях, и о нововведениях.
Загрузка файлов на PHP
Начать следует с создания формы:
Для тега мы указываются следующие атрибуты:
Во второй тег добавляется атрибут multiple и имя file[] — это позволит с помощью одного поля загрузить сразу несколько файлов. Также в коде присутствует div, в который позже будет выводиться сообщение.
Далее указываются стили CSS:
И вот как это выглядит:
Сначала нужно провести несколько проверок, и только потом перемещать файлы из временного хранилища непосредственно на сайт. Иначе может получиться так, что взломщики загрузят на сайт PHP-файлы и смогут их запустить, чтобы получить доступ к базе данных или к файловой системе сервера.
Вот как выглядит обработчик:
Если загрузка прошла успешно, создается массив разрешенных типов, по которому проверяется соответствие форматов. Затем, если валидация пройдена, с помощью функции move_uploaded_file файл перемещается из временного хранилища в указанную директорию.
Такой код хоть и работает, но он довольно примитивен и его нужно расширять:
В общем, стоит провести несколько дополнительных проверок, чтобы файлы не представляли угрозу для сайта и не валялись без дела.
Загрузка файлов на сайт с помощью AJAX
Если добавить возможности JavaScript, форму можно сделать полезнее и красивее. Например, можно будет загружать файлы через AJAX, а также добавить анимацию при перетаскивании:
Функция получает файлы с помощью объекта FormData, затем показывает сообщение, что началась загрузка, и начинает отправлять файл.
Вот как работает загрузка файлов на AJAX:
Заключение
Дальше с файлами можно делать все что угодно:
Это лишь малая часть возможностей PHP — подробнее узнать о них всех можно из курса «PHP-разработчик», в котором сильная теоретическая база закрепляется сложными, но интересными практическими задачами.
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Информационный центр
Статьи
Отправка файлов через форму
Перед начинающим программистом на PHP часто встает задача передать на сервер файл через форму. На сервере принятый файл обрабатывется, либо переносится в определенную папку, либо отправляется электронной почтой адресату, либо разбирается, и так далее и тому подобное.
В этой статье рассмотрим ситуацию с отправкой файла электронной почтой стандартной функцией mail().
Создадим простую форму.
И сразу небольшие пояснения. Если вы хотите отправить файл, то в форме необходимо установить аттрибут enctype в значение «multipart/form-data», в противном случае файлы отправляться не будут. Этот атрибут определяет метод кодирования данных и по умолчанию установлен в «application/x-www-form-urlencoded».
Тег input наверное самый распространенный тег формы, имеющий несколько типов. В нашей форме присутствует еще и тег input типа text, который принимает и передает текстовое значение. Кнопка «Отправить», это тоже тег input типа submit.
Вернемся к форме. Как отправить файл через форму мы уже знаем, теперь посмотрим как файл принять и обработать на стороне сервера.
Текстовые значения формы тегов input типа text, password, hidden, radio, а также тегов textarea и select принимаются на сервере через суперглобальные массивы $_POST или $_GET (в зависимости от указаний содержащихся в форме) выражением типа
$username = htmlspecialchars(stripslashes($_POST[‘username’]), ENT_QUOTES).
Вам отправлен файл
Подготовим заголовки для письма.
Если бы нам не нужно было отправлять файл вложением к письму, то заголовки могли бы выглядеть так:
$header = «From: no-reply@».$_SERVER[‘HTTP_HOST’].»\r\nContent-Type: text/html; charset=’windows-1251’\r\nContent-Transfer-Encoding: 8bit\r\n»;
Здесь указываем от кого письмо (From: ), тип текста письма и его кодировка (Content-Type: text/html; charset=’windows-1251′) и количество бит для кодирования символов (Content-Transfer-Encoding: 8bit). Для кириллических кодировок (koi8-r, koi8-u, windows-1251, iso-8859-5, cp866) указание количества бит является крайне желательным, если вы не хотите получать знаки вопроса вместо текста. Код \r\n служит обозначение кодов «возврата каретки» и «переноса строки» (так обозначается конец строки в windows)
Хотите знать больше? Нажмите «Нравится»
Если письмо имеет вложение в виде файла, то подготовка заголовка усложняется, меняется и тело письма. Нам надо прочитать файл в переменную, преобразовать ее и подать в преобразованном виде с соблюдением разметки. Это будет выглядеть так:
Вам отправлен файл
«.
«\r\n————«.$un.»\r\nContent-Type: application/octet-stream;name=\»$file_name_new\»\r\nContent-Transfer-Encoding:base64\r\nContent-Disposition:attachment;filename=».$file_name_new.»\r\n\r\n».chunk_split(base64_encode(fread($f,filesize($file_name_new_full)))).»\r\n»;
$headers = «From: «.$from.»\r\nReply-To: «.$from.»\r\nMIME-Version: 1.0\r\nContent-Type: multipart/mixed; boundary=\»———-«.$un.»\»\r\n»;
Осталось только отправить письма и удалить принятый файл.
Функция mail() возвращает логическое значение true или false в зависимости от результата отправки письма.
Если Вам помогла эта статья, можете выразить свою благодарность поставив на нее ссылку.
Работа с формами в PHP
Формы
Формы — это часть языка HTML. Формы нужны для передачи данных от клиента на сервер. Чаще всего формы используются для регистрации пользователей, заполнения анкет, оформления заказа в интернет магазине, и так далее.
Через формы можно отправлять как простую текстовую информацию, так и файлы.
Большую часть времени программирования на PHP вы будете так или иначе работать с формами и данными из них.
HTML описывает то, из каких элементов состоит форма, и как она выглядит. Но без принимающей стороны, то есть сервера, который принимает эти данные и обрабатывает их нужным образом, создавать формы нет никакого смысла.
PHP содержит множество средств для работы с формами. Это позволяет очень просто решать типичные задачи, которые часто возникают в веб-программировании:
Практически любой современный сайт содержит как минимум несколько разных HTML-форм.
Отправка формы
Рассмотрим один типичный пример — форма обратной связи. Для связи пользователей с авторами сайта, как правило, используются формы обратной связи, где человек указывает имя, почту для обратной связи и текст своего сообщения.
Такая форма в HTML может выглядеть следующим образом:
Это очень простая форма, состоящая из трёх полей и одной кнопки отправки.
Почти весь приведённый код описывает внешний вид и содержание формы, но следует обратить внимание на два атрибута тега
Тут есть два важных отличия от первого примера:
PHP автоматически сохраняет все загруженные файлы во временную папку на сервере. Но хранить там файлы нельзя, потому что эта директория периодически очищается, и ссылку на такой файл нельзя дать на сайте. Решение здесь только одно — переместить загруженный файл в другую папку. Перемещение файла всегда выполняют сразу после загрузки.
Перемещение загруженного файла
Код для перемещения файла в новую папку:
Функция move_uploaded_file() выполняет два действия:
Валидация формы
Валидация формы — это проверка содержимого её полей. Задача такой проверки — убедиться, что необходимые поля заполнены, а значения в них соответствуют ожидаемому формату.
Так, например, при регистрации пользователя на сайте, он должен заполнить поля с адресом электронной почты и придумать себе пароль. Оба поля обязательны к заполнению, но значение из поля email также должно быть корректным email-адресом.
Помимо текстовых значений формы, можно проверять формат и размер загружаемых файлов.
Общий подход к валидации
При выполнения валидации любой формы порядок действий будет всегда одним:
Как создать форму обратной связи с возможностью загрузки и отправки файла на почту 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 «.
Простая форма с загрузкой, скачать
Архив содержит простую форму с отправкой загруженного файла на почту.
Скрипт формы обратной связи с прикреплением файла (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 файл для обработки массива из нескольких файлов: