web-dev-qa-db-ja.com

Jquery / Ajaxフォーム送信（enctype = "multipart / form-data"）。 PHPで「contentType：False」が未定義のインデックスを引き起こすのはなぜですか？

Enctype = "multipart/form-data"でフォームを送信しようとしています。テキスト入力のためのajaxの送信を把握したら、フォームにjpeg/pngアップロードが含まれるため、この設定があります。

  1. フォームhtml内のアクションを使用してスクリプトを参照する場合、phpは正常に機能します。

  2. アラート行に次のように表示されるため、フォームデータは以下のjqueryによって正しく取得されるようです。productName = Test + Name＆productDescription = Test + Description＆OtherProductDetails =

  3. jquery success関数によって私のHTMLに出力された返されたデータは、次のようなPHPエラーです：未定義のインデックス：productName

  4. contentType：falseを削除すると、問題が修正されます。

Jquery/ajax multipart/form-data submissionをグーグル検索すると、トップヒットには少なくとも主に「contentType：false」が含まれます。誰かが私に理由を説明できますか？

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajaxhttp://hayageek.com/jquery-ajax-form-submit/jQuery.ajaxでmultipart/formdataを送信

Jquery APIドキュメントには、次のように記載されています。

Multipart/form-dataの送信で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;
  });
phpajaxformsjquery
30
DVCITIS

contentTypeのfalseオプションは、ファイルを渡すmultipart/form-dataフォームに使用されます。

contentTypeオプションをfalseに設定すると、jQueryがContent-Typeヘッダーを追加しないように強制します。そうしないと、境界文字列が欠落します。また、multipart/form-dataを介してファイルを送信する場合、processDataフラグをfalseのままにしておく必要があります。そうしないと、jQueryはFormDataを文字列に変換しようとしますが、失敗します。

標準のURLエンコード表記でテキスト文字列を作成するjQueryの.serialize()メソッドを使用します。

contentType: falseを使用する場合は、エンコードされていないデータを渡す必要があります。

.serialize():の代わりにnew FormDataを使用してみてください

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

console.log()を使用して、formDataがphpページに渡される方法の違いを確認してください。

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

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

フォームを設定してくださいアクション属性以下のように問題を解決します。

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