php+ajax file uploader, cannot get data from POST - php

Question

So the html code i have:
<form id="loginIMGForm">
<input type="file" name="file" id="loginIMG" />
<br />
<input type="submit" name="submit" value="Submit" id="submitloginIMG" />
</form>
<div id="loginIMGStatus">Select an image and upload.</div>
and then PHP code i have:
<?php
$imageinfo = getimagesize($_FILES['loginIMGForm']['tmp_name']);
if($imageinfo['mime'] != 'image/gif' && $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";
}
?>
and jquery is:
$('#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.
Thanks.

Answer 1

Why are you calling ajaxComplete?
Just do this instead:
$.ajax({
type: "POST",
url: "modules/upload.php",
data: str,
success: function(msg){
var result;
if(msg == 'OK'){ result = 'Login Image is updated'; }
else{ result = msg; }
$(this).html(result);
});
}
});
Also, when you say the data is empty, do you mean when you call alert or the html component?
Edit You can't use serialize on a file. It isn't supported and doesn't really make sense. See this page. Also, although it wasn't an issue yet, I do suspect you're going to have problems with calling ajaxComplete. The success parameter already handles calling your function when the ajax request completes. I'm not really sure what will happen with your code.