title: jQuery FormData POST - for file upload
body: <p>I am trying to submit a full form for server side processing using jQuery. The form contains various fields including a file upload option. I am trying to use FormData to do this as I don't care about browsers that don't support it at the moment.</p>
  
  <p>I have the following (simplified) jQuery code:</p>
  
  <pre><code>$("#create_event_form").submit(function(event) {
      event.preventDefault();
  
      var formData = new FormData($(this));
  
      $.post(
          "create_entity.php",
          { formData: formData },
          function(data) {
              var response = jQuery.parseJSON(data);
              if(response.code == "success") {
                  alert("Success!");
              } else if(response.code == "failure") {
                  alert(response.err);
              }
          }
      );
  });
  </code></pre>
  
  <p>And my server side looks like the following:</p>
  
  <pre><code>&lt;?php
  require_once('includes/database.php');
  
  
  $dbh = db_connect();
  
  $response = array();
  if($_SERVER['REQUEST_METHOD'] == "POST") {
      // do some other stuff...       
  
      // upload entity picture and update database
      $url = $_FILES['entity_pic']['name'];
      if($url != "") {
          if($type == "user") {
              $pic_loc = "images/profiles/";
          } else if($type == "chapter") {
              $pic_loc = "images/chapters/";
          } else if($type == "group") {
              $pic_loc = "images/groups/";
          } else if($type == "event") {
              $pic_loc = "images/events/";
          }
          // upload the picture if it's not already uploaded
          if(!file_exists($pic_loc . $_FILES['entity_pic']['name'])) {
              move_uploaded_file($_FILES['entity_pic']['tmp_name'], $pic_loc . $url);
          }
          $image_query = "INSERT INTO image (entity_id, url, type) VALUES (:entity_id, :url, :type);";
          $image_query_stmt = $dbh-&gt;prepare($image_query);
          $image_query_stmt-&gt;bindParam(":entity_id", $entity_id);
          $image_query_stmt-&gt;bindParam(":url", $url);
          $image_query_stmt-&gt;bindValue(":type", $type);
          if(!$image_query_stmt-&gt;execute()) {
              die(print_r($image_query_stmt-&gt;errorInfo()));
          }
      }
  
  
      echo json_encode($response);
  
  }
  </code></pre>
  
  <p>?></p>
  
  <p>And some relevant HTML:</p>
  
  <pre><code>&lt;form id="create_event_form" action="create_entity.php" method="POST" enctype='multipart/form-data'&gt;
      &lt;input type="file" name="entity_pic" value="Insert Photo" /&gt;
      &lt;!-- other inputs --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Right now I get an Illegal invocation error, presumably on my initialization of my FormData object. I've been searching forever of example of how to do this with jQuery and am coming up empty. Also, I want to clarify that my server side code will work. When I pass the formData as "formData" to my PHP script, how do I access the fields in it? Would it be "$_POST['formData']['field_name']" or just $_POST['field_name'] or something else entirely?</p>
  
  <p>Thanks for any help.</p>