example - Envío de formulario Jquery/Ajax(enctype="multipart/form-data"). ¿Por qué ''contentType: False'' causa índice indefinido en PHP?

submit form ajax jquery example

Question

He intentado enviar un formulario con enctype = "multipart / form-data". Tengo esta configuración porque el formulario implicará cargas jpeg / png una vez que haya resuelto el envío ajax para las entradas de texto.

1. el php funciona bien cuando se hace referencia al script usando acción dentro del formulario html.

2. los datos del formulario parecen recuperarse correctamente mediante el siguiente jquery porque la línea de alerta muestra: productName = Test + Name & productDescription = Test + Description & OtherProductDetails =

3. los datos devueltos impresos en mi HTML por la función de éxito de jquery es un error de php que dice: Índice indefinido: productName

4. eliminar contentType: falso corrige el problema.

Cuando busco el envío de jguery / ajax multipart / form-data, los hits principales al menos incluyen principalmente ''contentType: false''. ¿Podría alguien explicarme el motivo?

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax http://hayageek.com/jquery-ajax-form-submit/ Envío multipart / formdata con jQuery.ajax

La documentación de la API de jquery dice: contentType (predeterminado: ''application / x-www-form-urlencoded; charset = UTF-8'') Tipo: String Cuando envíe datos al servidor, use este tipo de contenido.

¿Por qué tendríamos que configurarlo en falso para una presentación multipart / form-data? ¿Cuándo se necesitaría la configuración falsa?

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;
  });

Answer 1

Configure su atributo de acción de formulario de la siguiente manera que resolverá su problema.

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

código 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;
    });
});

Answer 2

La opción contentType to false se usa para formularios multipart / form-data que pasan archivos.

Cuando se establece la opción contentType en false, obliga a jQuery a no agregar un encabezado Content-Type; de ​​lo contrario, la cadena de límite faltará. Además, al enviar archivos a través de varias partes / formulario uno debe dejar el indicador processData establecido en falso, de lo contrario, jQuery intentará convertir su FormData en una cadena, que fallará.

Para tratar de solucionar su problema:

Está utilizando el método jQuery .serialize () que crea una cadena de texto en notación estándar codificada en URL.

Necesitará pasar datos no codificados cuando use "contentType: false".

Intenta usar "nuevo FormData" en lugar de .serialize ():

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

Vea usted mismo la diferencia de cómo su formData se pasa a su página php utilizando console.log ().

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

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