title: jQuery AJAX single file upload
body: <p>I know this question has been asked a lot, and I tried at least 10 different codes to run this without success.</p>
  
  <p>I'm trying to upload a single file with <a href="https://api.jquery.com/jQuery.ajax/" rel="noreferrer"><code>jQuery.ajax()</code></a>, but it doesn't work. The code below always outputs:</p>
  
  <blockquote>
    <p>please choose a file' because the file's name is not set or something</p>
  </blockquote>
  
  <hr>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;form enctype="multipart/form-data"&gt;
    &lt;input name="file" type="file" /&gt;
    &lt;input type="button" value="Upload" /&gt;
  &lt;/form&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  </code></pre>
  
  <h3>jQuery</h3>
  
  <pre><code>$(function(){
    $(document).ready(function(){
      var files;
  
      $('input[type=file]').on('change', prepareUpload);
      function prepareUpload(event){
        files = event.target.files;
      };
      $(':button').click(function(){
          var formData = new FormData();
          $.each(files, function(key, value){
            formData.append(key, value);
          });
          alert(formData);
          $.ajax({
            url: 'check.php',  
            type: 'GET',
            data: formData,
            success: function(data){ $('#result').html(data); }, 
            cache: false,
            contentType: false,
            processData: false
          });
      });
    });
  });
  </code></pre>
  
  <h3>PHP</h3>
  
  <pre><code>if(isset($_GET['file'])){
      $filename = $_FILES['file']['name'];
      if(isset($filename) &amp;&amp; !empty($filename)){
          echo 'sup my man?!';
      }else{
          echo 'please choose a file';
      }
  }else{
      echo 'not set';
  }
  </code></pre>
  
  <p>I don't know what the problem is, I know it's in the <code>FormData</code> object creation because the alert - good to go, doesn't work.</p>
  
  <p>BTW it is really important for me that it would be written in jQuery.</p>