title: How do I add additional POST parameters to ajax file upload?
body: <p>I'm using ajax file upload javascript and php script to upload an image. It works satisfactorily with $_FILES but I need to send some additional data to the processing script. The form HTML looks like:</p>
  
  <pre><code>&lt;form id="image1" action="" method="post" enctype="multipart/form-data"&gt;
    &lt;label&gt;image 1?&lt;/label&gt;
    &lt;p&gt;&lt;input type="file" class="saveImage" name="image1" value="&lt;?php echo $something; ?&gt;" id="&lt;?php echo $id; ?&gt;" additional_info="some data" /&gt;&lt;/p&gt;
    &lt;p&gt; &lt;input type="submit" value="Upload" class="submit" /&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I need to be able to pass a variable id and some other data, call it "additional_data" to the php script, then process it in my php script using <code>$additional_data = $_POST['additional_data']</code>.  The javascript I'm using is:</p>
  
  <pre><code>    &lt;script&gt;
      $(document).ready(function (e) {
        $("#image1").on('submit',(function(e) {
          e.preventDefault();
          $("#message").empty();
          $('#loading').show();
          var DATA=$(this).val();
          var ID=$(this).attr('id');
          var ADDL=$(this).attr('additional_data');
          var dataString = 'image1='+DATA+'&amp;id='+ID+'&amp;additional_info='+ADDL;
          $.ajax({
            url: "uploadFile.php",  
            type: "POST",        
            // data:  new FormData(this), 
            data:  new FormData(this,dataString),
            contentType: false,   
            cache: false,   
            processData:false,        
            success: function(data)    
            {
              $('#loading').hide();
              $("#message").html(data);
            }
          });
        }));
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>It doesn't send the dataString, only the FILES array.</p>