Как отправить несколько файлов по ajax вместе с данными формы

Как отправить несколько файлов по ajax вместе с данными формы

Многие программисты задаются вопросом, как отправить файлы по ajax. И многие придумывают свои, технически не правильные костыли. НО! Проблема усложняется, когда необходимо отправить файлы по ajax вместе с данными формы.

На самом деле решение максимально простое и в этом нам поможет FormData

Как можно догадаться из названия, FormData это объект нашей формы, который мы сможем дополнить необходимыми полями и отправить по ajax, как это делаем с serialize.

Для примера возьмём вот такую форму:


Видно, что нам необходимо отправить текстовое поле, а так же НЕСКОЛЬКО файлов. Для усложнения задачи, сделаем, чтобы отправлялись только изображения. Т.е. добавим проверку формата файла на JS. В этом случае нам отлично подойдёт FormData

Заранее предупреждаю, что я использую jQuery


Обратите внимание, что в объекте FormData мы указали НЕ images , а images[] . Таким образом, мы создаём массив, для нескольких файлов.

По сути это всё. Теперь вы можете открыть консоль разработчика в браузере. Переключиться на вкладку network и отправить форму. Увидите ваш запрос и его содержимое.

Так же теперь вы можете описать стандартный обработчик request’ов на php в script.php. Т.е. серверная часть остаётся неизменной.

 


it-blog.club 17
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать
Поддержать на Donationalerts
Мой контент смог тебе помочь?
Мой блог существует уже несколько лет и предоставляет контент бесплатно.
Но хостинг сам себя не оплатит. Думаю 30-50 рублей не такая большая сумма для тебя, но если поможет каждый.
То этот прекрасный блог сможет существовать дальше и в этом будет лично твоя заслуга.
А я лишь могу обещать стараться выкладывать новые решения, но без твоей поддержки это всё сложнее :(