Представление JQuery/Ajax (enctype = "multipart/form-data" ). Почему "contentType: False" вызывает индекс undefined в PHP?

Я пытался отправить форму с enctype = "multipart/form-data". У меня есть этот параметр, потому что форма будет включать загрузку в формате jpeg/png после того, как я выяснил, что ajax отправляет текстовые вводы.

  1. PHP работает нормально при обращении к сценарию с помощью действия в форме HTML.

  2. данные формы, похоже, корректно извлекаются с помощью приведенного ниже jquery, поскольку в строке предупреждения отображается: productName = Test + Name & productDescription = Test + Description & OtherProductDetails =

  3. возвращенные данные, напечатанные в мой HTML с помощью функции успеха jquery, являются ошибкой php: неопределенный индекс: productName

  4. удаление contentType: false устраняет проблему.

Когда я отправляю в Google jquery/ajax multipart/form-data, самые популярные из них, по крайней мере, включают "contentType: false". Пожалуйста, кто-нибудь может объяснить мне причину?

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax http://hayageek.com/jquery-ajax-form-submit/ Отправка multipart/formdata с помощью jQuery.ajax

Документация по jquery API гласит: contentType (по умолчанию: 'application/x-www-form-urlencoded; charset = UTF-8') Тип: String При отправке данных на сервер используйте этот тип контента.

Зачем нам нужно устанавливать его в false для многоэлементной/формы данных? Когда вообще понадобится ложная настройка?

Jquery:

  $("#addProductForm").submit(function (event) {
      event.preventDefault();
      //grab all form data  
      var formData = $(this).serialize();

      $.ajax({
          url: 'addProduct.php',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              $("#productFormOutput").html(returndata);
              alert(formData);
          },
          error: function () {
              alert("error in ajax form submission");
          }
      });

      return false;
  });

Ответы

Ответ 1

contentType в false используется для multipart/form-data которые передают файлы.

Если для параметра contentType значение false, это заставляет jQuery не добавлять заголовок Content-Type, в противном случае строка границы будет отсутствовать в нем. Кроме того, при отправке файлов через multipart/form-data необходимо оставить флаг processData false, иначе jQuery попытается преобразовать ваши FormData в строку, что не удастся.

Чтобы попытаться исправить вашу проблему:

Используйте метод jQuery .serialize() который создает текстовую строку в стандартной нотации в кодировке URL.

Вам необходимо передавать contentType: false данные при использовании contentType: false.

Попробуйте использовать new FormData вместо .serialize():

  var formData = new FormData($(this)[0]);

Убедитесь сами, как ваши formData передаются на вашу php-страницу с помощью console.log().

  var formData = new FormData($(this)[0]);
  console.log(formData);

  var formDataSerialized = $(this).serialize();
  console.log(formDataSerialized);

Ответ 2

Пожалуйста, укажите свою форму атрибут действия, как показано ниже, и решит вашу проблему.

<form name="addProductForm" id="addProductForm" action="javascript:;" enctype="multipart/form-data" method="post" accept-charset="utf-8">

Код jQuery:

$(document).ready(function () {
    $("#addProductForm").submit(function (event) {

        //disable the default form submission
        event.preventDefault();
        //grab all form data  
        var formData = $(this).serialize();

        $.ajax({
            url: 'addProduct.php',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function () {
                alert('Form Submitted!');
            },
            error: function(){
                alert("error in ajax form submission");
            }
        });

        return false;
    });
});