title: php+ajax file uploader, cannot get data from POST
body: <p>So the html code i have:</p>
  
  <pre><code>&lt;form id="loginIMGForm"&gt;            
  &lt;input type="file" name="file" id="loginIMG" /&gt;
  &lt;br /&gt;
  &lt;input type="submit" name="submit" value="Submit" id="submitloginIMG" /&gt;
  &lt;/form&gt;
  
  &lt;div id="loginIMGStatus"&gt;Select an image and upload.&lt;/div&gt;
  </code></pre>
  
  <p>and then PHP code i have:</p>
  
  <pre><code>&lt;?php
  
  $imageinfo = getimagesize($_FILES['loginIMGForm']['tmp_name']);
  
  if($imageinfo['mime'] != 'image/gif' &amp;&amp; $imageinfo['mime'] != 'image/jpeg') {
      echo "Sorry, we only accept GIF and JPEG images\n";
      exit;
  }
  
  $uploaddir = 'uploads/';
  $uploadfile = $uploaddir . basename($_FILES['loginIMGForm']['name']);
  
  if (move_uploaded_file($_FILES['loginIMGForm']['tmp_name'], $uploadfile)) {
      echo "File is valid, and was successfully uploaded.\n";
  } else {
      echo "File uploading failed.\n";
  }
  ?&gt;
  </code></pre>
  
  <p>and jquery is:</p>
  
  <pre><code>    $('#loginIMGForm').submit(function() {
          // 'this' refers to the current submitted form
          var str = $(this).serialize();
          alert(str);
          $.ajax({
              type: "POST",
              url: "modules/upload.php",
              data: str,
              success: function(msg){
                  $("#loginIMGStatus").ajaxComplete(function(event, request, settings){
                      if(msg == 'OK'){ result = 'Login Image is updated'; }
                      else{ result = msg; }
  
                      $(this).html(result);
                  });
  
              }
  
          });
  
          return false;
      }); 
  
  I did debuging using alert, the data is empty. What did I do wrong.
  </code></pre>
  
  <p>Thanks.</p>