テキスト入力とファイル入力を含むフォームを送信

Question

text inputとfile inputを含むフォームをJqueryとAjaxを使用してphpページに送信していますが、送信前にテキスト入力を検証して送信します。以下は

は、フォームページは、これはPHPの受信ページにnullを返します

  <form id="registrationForm" method="POST" name="registrationForm" enctype="multipart/form-data"> 

       <input type="text" name="firstName" id="firstName" /> 

       <input type="file" name="file" id="file" /> 

       <button type="submit"> UPLOAD</button> 

      </form> 

とJavascriptのページ

受信ページです

$('#registrationForm').validate({ 
     rules: { 
      firstName:{ 
       required: true 
      } 
     }, 
     message:{ 
      firstName: { 
       required: "Please Enter Name" 
      } 
     }, 


    submitHandler : function(){ 

     //grab all form data 
     var formData = new FormData(this); 

     $.ajax({ 
     url: 'submitPage.php', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
      success: function(data) { 
      $('#message').html(data); 
      $('#message').html(data).hide().fadeIn(1500,function(){$('#message')}); 
      } 
     }); 

    } 
    }); 

そしてPHPページ

 <?php 
      $firstName=$_POST['firstName']; 
      $file=$_FILES['file']['name']; 

      echo $firstName; 
      echo $file; 

     ?> 

です。誰かが私を助けてくれるかどうか本当に欲しい。ありがとう。

Answer 1

$('#registrationForm').validate({ 
     rules: { 
      firstName:{ 
       required: true 
      } 
     }, 
     message:{ 
      firstName: { 
       required: "Please Enter Name" 
      } 
     }, 


    submitHandler : function(){ 

     //grab all form data 
     var formData = new FormData(document.querySelector("form")); 

     $.ajax({ 
     url: 'submitPage.php', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
      success: function(data) { 
      $('#message').html(data); 
      $('#message').html(data).hide().fadeIn(1500,function(){$('#message')}); 
      } 
     }); 

    } 
    }); 

リンクの下で