0

Отправляю AJAX-запрос с параметром processData = false:

var params = {};
params = ...
jQuery.ajax({
    url: АДРЕС СКРИПТА,
    async: false,
    type: 'POST',
    processData: false,
    data: {'params': params},
    dataType: 'json',
    success: function(data) {...},
});

А на сервере получить эти параметры не могу: echo $_POST['params']; выдает undefined index "params". Думаю, это из-за processData, - массив параметров не преобразуется в удобный для PHP вид. Как быть в таком случае?

В запросе передается несколько данных, причем, как обычные параметры, так и файл. Эту настройку поставил именно из-за файла, так как без нее возникали другие ошибки.


Массив параметров содержит следующие элементы:

  • id материала
  • тип материала
  • файл

Первые 2 параметра берутся из скрытого input'а на странице, а последний - в событии change fileinput'а (где, в общем, и вызывается AJAX-запрос) берется следующим образом:

function loadFile(element) {
    var file = this.files[0];
    ...
}

Далее все это записывается в массив:

var params = {};
params.matId = jQuery(...).attr('data-id');
params.matType = jQuery(...).attr('data-type');
params.file = file;
5
  • А можно показать прям вашу форму html и как params образуются Commented 4 февр. 2016 в 13:25
  • @АлексейШиманский, добавил в вопрос.
    – nup
    Commented 4 февр. 2016 в 13:32
  • Стоп. Если это всё поля формы. То почему сразу бы не послать форму со всеми полями? а ля var formData = new FormData($('#data')[0]); а в дата data: formData, Commented 4 февр. 2016 в 14:00
  • @АлексейШиманский, это не поля формы. Input - просто кнопка "Загрузить файл", а остальные данные берутся из совсем другого места страницы. Конвертировать file в formData пытался, но если отправлять просто так - возникают ошибки (как я понял, из-за попытки JS конвертации этого объекта в строку). Если в этом случае отключить параметр processData, то возникает описанная выше проблема - когда просто не могу получить данные на сервере. Пустой массив $_POST.
    – nup
    Commented 4 февр. 2016 в 14:07
  • а как же Первые 2 параметра берутся из скрытого input'а на странице, а последний - в событии change fileinput'а ? почему бы не обернуть это в форму и при сабмите не сделать аякс и то что я написал?.... а так... в любом случае вам придется создавать объект FormData и наполнять его поля данными.... щас попробую описать Commented 4 февр. 2016 в 14:19

1 ответ 1

1

Во-первых сразу напишу, что в запросе не хватает contentType: false, чтобы jquery не устанавливал contentType.

Далее по теме. Для отсыла multipart/form-data с файлами на сервер необходимо использовать объект FormData.

Объект FormData позволяет составить набор пар ключ/значение для отправки при помощи XMLHttpRequest. Это, в первую очередь, предназначено для отправки данных форм, но вы можете использовать этот объект независимо от форм, тогда передаваемые данные будут в том же формате, что и при обычной отправке формы с enctype="multipart/form-dat

Подробнее о нем написано в документации.

Итак, все необходимые данные, включая файлы нужно поместить в FormData парой ключ-значение.

var formData= new FormData();
formData.append('matId', 123);
formData.append('matType', "freak");
formData.append('file', files[0]);

И его уже передавать в аякс data: formData

Более наглядно:

var files;

$('input[type=file]').on('change', prepareUpload);

function prepareUpload(event) {
  files = event.target.files;
}


// Отсыл данных на сервер
$(document).on('click', '#submit', function() {
  var formData = new FormData();
  formData.append('matId', $('#test').data('id'));
  formData.append('matType', $('#test').data('type'));
  formData.append('file', files[0]);

  $.ajax({
    url: 'serverFile.php',
    type: 'POST',
    data: formData,
    cache: false,
    dataType: 'json',
    processData: false,
    contentType: false,

    success: function(data) {
      // do smth.			
    },
  });

  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="matId" data-id="123" data-type="hello" id="test">Image:
<input name="displayImg" type="file" />
<input type="Button" value="Submit" id="submit">

На сервере, делать что угодно:

print_r($_POST);
print_r($_FILES);

Примеры реализации можно еще посмотреть Здесь и Тут (в случае нескольких файлов например)

1
  • спасибо, теперь все получилось. Как оказалось, проблема была в data: {'params': params}. Заменил на data: params (params - тот же formData), как у вас, и данные на сервере удалось получить.
    – nup
    Commented 4 февр. 2016 в 15:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.