title: jquery $.each breaks FormData appending
body: <p>So I'm trying to create a drag'n'drop file uploader, and I've gotten to the point where the files are uploaded to the server. I'm using jQuery and the FormData object to formulate the request, and <code>$.ajax</code> to send it. I'm now running into an issue where if I iterate over my <code>files</code> array, nothing will be received over on the php side, but if I hard-append each file into the filesData <code>FormData</code> object, the php side will acknowledge receiving the files. Am I doing something wrong here?</p>
  
  <pre><code>    $("#upload-panel").on("drop", function(event) {
        event.preventDefault();
        event.stopPropagation();
        //files is now simply an array of file objects
        var files = event.originalEvent.dataTransfer.files; 
  
        var filesData = new FormData();
  
        // this doesn't work
        $.each(files, function(key, value) {
          filesData.append(key, files[key]);
          console.log(key);
          console.log(files[key]);
        });
  
        // this does
        filesData.append(0, files[0]);
        filesData.append(1, files[1]);
        // repeat for as many files.
  
        $.ajax({
          type: "POST",
          url: "file-processor.php",
          data: filesData,
          processData: false,
          contentType: false,
          cache: false,
          success: function(data, text, xhr) {
            console.log(data);
            console.log(text);
            console.log(xhr);
          },
          error: function (xhr, textStatus, err) {
            $("#results").html += err;
          }
        });
      }
  </code></pre>
  
  <p>file-processor.php : <code>print_r($_FILES);</code></p>
  
  <p><code>files</code> variable: 
  <img src="https://i.stack.imgur.com/Pkzse.png" alt="files"></p>