title: submit form via jquery FormData
body: <p>I am trying to upload a file using jquery. Here's the form:</p>
  
  <pre><code>&lt;form id="upload_data" class="project" enctype="multipart/form-data" method="POST"&gt;
  
  &lt;select id="project_id" name="project_id"&gt;
     &lt;option value="1"&gt;1&lt;/option&gt; 
     &lt;option value="2"&gt;2&lt;/option&gt; 
  &lt;/select&gt;
  
   &lt;input  type="file" id="data" name="data" /&gt;
  
  &lt;input type="hidden" name="user_id" id="user_id" value="12" required&gt;
  
  &lt;button type="submit" id="ajax" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the jquery part:</p>
  
  <pre><code>$('#upload_data').submit( function( e ) {
  
          var form = $('form');
          var formData = new FormData();
  
                  $.each($(':input', form ), function(i, fileds){
                     formData.append($(fileds).attr('name'), $(fileds).val());
                 });
  
                  $.each($('input[type=file]',form )[0].files, function (i, file) {
                     formData.append(file.name, file);
                 });
  
  $.ajax( {
        url: '../controllers/process.php',
        type: 'POST',
        enctype: 'multipart/form-data',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data)
          {
              alert(data);
          },
          error: function(data)
          {
              alert(data);
  
          }
      } );
  
      });
  </code></pre>
  
  <p>The problem is that I am getting empty post values in process.php:</p>
  
  <pre><code>if (isset($_POST['project_id']) AND isset($_POST['user_id'])){
     //process 
  }else{
  echo 'No post data';
  }
  </code></pre>
  
  <p>It always return 'No post data' (But in console, I can see that data has been posted but it's not the case in server.). What am I missing here?</p>