title: jQuery ajax post using FormData() append data element can't find the appended data element after post
body: <p>I use the code from talkerscode.com to implement file upload using drag and drop. The code is working. Now I would like to add additional input value during in the same ajax post. I add an input tag called "user_id" in the following html code. And I append the element into the formdata object. After the change drag and drop upload still work, but the PHP code complain the $_POST["user_id"] is not defined. Here is my code. Please help!</p>
  
  <pre><code>&lt;html&gt;
  &lt;!-- code original from talkerscode.com --&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="upload_style.css"&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;input type="text" name="user_id", id="user_id" value="1228"&gt;
  &lt;input type="file"&gt;
  &lt;div id="drop-area"&gt;
   &lt;h3 class="drop-text"&gt;Drag and Drop Images Here&lt;/h3&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script&gt;
  $(document).ready(function()
  {
   $("#drop-area").on('dragenter', function (e){
    e.preventDefault();
    $(this).css('background', '#BBD5B8');
   });
  
   $("#drop-area").on('dragover', function (e){
    e.preventDefault();
   });
  
   $("#drop-area").on('drop', function (e){
    $(this).css('background', '#D8F9D3');
    e.preventDefault();
    var image = e.originalEvent.dataTransfer.files;
    createFormData(image);
   });
  });
  
  function createFormData(image)
  {
   var formImage = new FormData();
   formImage.append('userImage', image[0]);
   formData.append('user_id', $('#user_id').val());
   uploadFormData(formImage);
  }
  
  function uploadFormData(formData)
  {
   $.ajax({
   url: "upload_image.php",
   type: "POST",
   data: formData,
   contentType:false,
   cache: false,
   processData: false,
   success: function(data){
   $('#drop-area').html(data);
   }});
   }
   &lt;/script&gt;
  
   ----------------PHP code -------------------
  
  &lt;?php
      if(is_array($_FILES))
      {
       if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
       $sourcePath = $_FILES['userImage']['tmp_name'];
       $targetPath = "images/".$_FILES['userImage']['name'];
       if(move_uploaded_file($sourcePath,$targetPath)) {
  ?&gt;
     &lt;img src="&lt;?php echo $targetPath; ?&gt;"&gt;
     &lt;p&gt; user_id = &lt;?php echo $_POST["user_id"] ?&gt; &lt;/p&gt;
     &lt;?php
     exit();
    }
   }
  }
  ?&gt;
  
  
  -----------------------------------------------
  </code></pre>