web-dev-qa-db-fra.com

Jquery / Ajax Form Submission (enctype = "multipart / form-data"). Pourquoi 'contentType: False' provoque-t-il un index non défini en PHP?

J'ai essayé de soumettre un formulaire avec enctype = "multipart/form-data". J'ai ce paramètre parce que le formulaire impliquera des envois jpeg/png une fois que j'ai compris la soumission ajax pour les entrées de texte.

  1. le php fonctionne bien lors du référencement du script en utilisant l'action dans le formulaire html.

  2. les données du formulaire semblent être récupérées correctement par la requête ci-dessous car la ligne d'alerte indique: productName = Test + Name & productDescription = Test + Description & OtherProductDetails =

  3. les données retournées imprimées sur mon fichier HTML par la fonction jquery success sont une erreur php qui dit: Index non défini: productName

  4. supprimer contentType: false corrige le problème.

Lors de la soumission de google jquery/ajax multipart/form-data, les résultats les plus consultés incluent principalement 'contentType: false'. S'il vous plaît quelqu'un pourrait-il m'expliquer la raison?

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajaxhttp://hayageek.com/jquery-ajax-form-submit/Envoi de multipart/formdata avec jQuery.ajax

La documentation de l'API jquery indique: contentType (par défaut: 'application/x-www-form-urlencoded; charset = UTF-8') Type: Chaîne Pour l'envoi de données au serveur, utilisez ce type de contenu.

Pourquoi aurions-nous besoin de le définir sur false pour une soumission multipart/form-data? Quand le faux réglage serait-il nécessaire?

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;
  });
phpajaxformsjquery
30
DVCITIS

contentType L'option sur false est utilisée pour les formulaires multipart/form-data qui transmettent des fichiers.

Lorsque vous définissez l'option contentType sur false, cela oblige jQuery à ne pas ajouter d'en-tête Content-Type, sinon la chaîne de limite lui manquera. De plus, lors de la soumission de fichiers via multipart/form-data, vous devez laisser le drapeau processData défini sur false, sinon jQuery tentera de convertir votre FormData en chaîne, ce qui échouera.

Utilisez la méthode .serialize() de jQuery, qui crée une chaîne de texte en notation standard codée par URL.

Vous devez transmettre des données non codées lorsque vous utilisez contentType: false.

Essayez d’utiliser new FormData Au lieu de .serialize():

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

Voyez par vous-même la différence entre la façon dont votre formData est transmise à votre page php en utilisant console.log().

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

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

Veuillez définir votre formulaire attribut d'action comme ci-dessous, cela résoudra votre problème.

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

code 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;
    });
});
7
Dhaval Bharadva