title: jQuery AJAX file upload PHP
body: <p>I want to implement a simple file upload in my intranet-page, with the smallest setup possible.</p>
  
  <p>This is my HTML part:</p>
  
  <pre><code>&lt;input id="sortpicture" type="file" name="sortpic" /&gt;
  &lt;button id="upload"&gt;Upload&lt;/button&gt;
  </code></pre>
  
  <p>and this is my JS jquery script:</p>
  
  <pre><code>$("#upload").on("click", function() {
      var file_data = $("#sortpicture").prop("files")[0];   
      var form_data = new FormData();
      form_data.append("file", file_data);
      alert(form_data);
      $.ajax({
          url: "/uploads",
          dataType: 'script',
          cache: false,
          contentType: false,
          processData: false,
          data: form_data,                         
          type: 'post',
          success: function(){
              alert("works"); 
          }
      });
  });
  </code></pre>
  
  <p>There is a folder named "uploads" in the root directory of the website, with change permissions for "users" and "IIS_users".</p>
  
  <p>When I select a file with the file-form and press the upload button, the first alert returns "[object FormData]". the second alert doesn't get called and the"uploads" folder is empty too!?</p>
  
  <p>Can someone help my finding out whats wrong?</p>
  
  <p>Also the next step should be, to rename the file with a server side generated name. Maybe someone can give me a solution for this, too.</p>