title: Can't append content to FormData()
body: <p>I have two different JS functions to handle image uploads. One to read the file and to (globally) create the FormData object and the other to send it to a PHP file via AJAX.</p>
  
  <p>Even though the <code>file</code> is valid I can't append it to the FormData. And strings neither. And as it turns out I'm only sending empty XHRequests via Ajax, because I don't get any other content from PHP then empty arrays.</p>
  
  <p>Since the first JS function initializes the formData variable globally the second function should have no problems using it, am I right?</p>
  
  <p>My Javascript looks like this (I commented out some unnecessary lines:</p>
  
  <pre><code>   $(document).ready(function(){
  
        var formUplImg = $('.form-upl-img');
        var fileInput  = $('.file-input');
  
        // Analyse files from input immediately
        fileInput.on('change', function(){
           readFile($(this).attr('id'));
        })
  
        // Upload images on submit
        formUplImg.on('submit', function(event) {
           uploadImg($(this), event);
        });
  
  
  
        function readFile(id){
           // Grab file that's supposed to be uploaded
           var fileInput = document.getElementById(id);
           var fileCount = fileInput.files.length;
               formData  = new FormData();
  
           // If there is no file
           if( fileCount!= 1 ){
              // goodImg    = false;
              // Error message
              // showMsgBar(iClose, 'Da ist nichts.', 'Bitte wähle zuerst eine Datei aus.', red);
  
           // If there is a file
           } else {
              // Save file attributes
              var file      = fileInput.files[0];
              var fileName  = fileInput.files[0].name;
              var fileSize  = fileInput.files[0].size;
              var fileType  = fileInput.files[0].type;
  
              // If file is not an image
              if( !fileType.match(/image.*/) ) {
                 // goodImg    = false;
                 // Error message
                 // showMsgBar(iClose, 'Ungültiger Dateityp.', 'Das Bild muss ein JPG, PNG, GIF oder SVG sein.', red);
  
              // If file is an image
              } else {
                 // If file size exceeds 3MB
                 if( fileSize &gt; 3145728 ) {
                    // goodImg = false;
                    // Error message
                    // showMsgBar(iClose, 'Das Bild ist zu groß.', 'Die Dateigröße darf max. 3MB betragen.', red);
  
                 // If image file size is ok
                 } else {
                    // goodImg = true;
                    // Distinguish img use cases
                    if( fileInput.id.indexOf('icon') &gt; -1 ) {
                       var imgUsage = 'icon'; // round user icon (for usage in header)
                    } else if ( fileInput.id.indexOf('logo') &gt; -1 ) {
                       var imgUsage = 'logo'; // horizontal logo (contributors/admin or corporation logo)
                    } else if ( fileInput.id.indexOf('photo') &gt; -1 ) {
                       var imgUsage = 'photo'; // photo for posts
                    } // img use cases
  
     console.log(file, imgUsage); // =&gt; the file with all attributes + 'icon'
                    formData.append(imgUsage+'_upload_input', file);
                    formData.append('img-usage', imgUsage);
     console.log(file, imgUsage); // =&gt; the file with all attributes + 'icon'
                 } // /file size is ok
              } // /file is an image
           } // /file is not empty
        } // /readFile()
  
  
        function uploadImg($this, event){
  
           var serialForm = $this.serialize();
     console.log(serialForm.toString()); // =&gt; 'user_id=36'
           $.ajax({
              url        : "test-upload.php",
              type       : "POST",
              data       : formData+serialForm, 
              async      : true,
              cache      : false,
              processData: false,
              contentType: false,
              success    : function(callback){
  
     console.log(callback);
                 formdata = new FormData();
              }
           });
           event.preventDefault();
  
        } // /uploadImg
     }); // /jQuery
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8" /&gt;
     &lt;title&gt;Test&lt;/title&gt;
     &lt;script src="js/jquery-2.1.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;h1&gt;Test&lt;/h1&gt;
  
              &lt;form action="" method="post" name="form_profile_icon_upload" class="form form-profile form-upl-img form-profile-side-right" id="form-profile-icon-upload" enctype="multipart/form-data"&gt;
                 &lt;fieldset class="fieldset icon-upload-fieldset" id="profile-icon-upload-fieldset"&gt;
                    &lt;legend class="legend"&gt;Icon ändern &lt;span class="label-span"&gt;(siehe oben)&lt;/span&gt;&lt;/legend&gt;
                       &lt;input type="file" name="icon_upload_input" class="file-input icon-upload-input" id="profile-icon-upload-input" /&gt;
                       &lt;p class="form-txt"&gt;&lt;strong&gt;Hinweis:&lt;/strong&gt;&lt;br /&gt;
                          Die Dateigröße darf &lt;strong&gt;3 MB&lt;/strong&gt; nicht überschreiten. Quadratische Icons eignen sich optimal, sind aber kein Muss.&lt;/p&gt;
                       &lt;input type="hidden" name="user_id" value="36" /&gt;
                       &lt;button type="submit" name="profile_icon_upl_btn" class="button button-green form-sbmt-btn" id="profile-icon-upl-btn" value="Hochladen"&gt;Hochladen&lt;/button&gt;
                       &lt;p class="img-del-txt"&gt;
                       &lt;/p&gt;
                 &lt;/fieldset&gt;
              &lt;/form&gt;&lt;!-- Icon upload form --&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The PHP file looks like this (for test purposes):</p>
  
  <pre><code>&lt;?php
  
     if( isset($_POST) &amp;&amp; isset($_FILES) ){
  
  print_r($_POST);
  echo ($_POST['icon_upload_input']);
  print_r($_FILES);
  die();
  
     }
  </code></pre>
  
  <p>I'm using latest Firefox 35.0 and jQuery 2.1.3.
  Can anyone help me out?</p>