I'm trying to upload an image by submitting form. Following is my code snippet:
html:
<form method="POST" id="statusform" action="insertstatus.php" enctype="multipart/form-data">
<textarea name="statusText" onclick="javascript:this.value='';" class="retroText" style="width:600px;height:100px;font-family:lucida sans unicode,lucida grande,sans-serif;resize:none;padding:5px;">Post your crap here ...</textarea>
<input type="file" name="statusPhoto" accept="image/gif, image/jpeg, image/x-ms-bmp, image/x-png" size="26" />
</form>
jquery:
$("#statusform").submit(function() {
$.post($("#statusform").attr("action"), $("#statusform").serialize(), function(data){
alert(data);
});
//Important. Stop the normal POST
return false;
});
php:
if(isset($_FILES['statusPhoto']) && $_FILES['statusPhoto']['size'] > 0)
{
<Image Upload Code>
}
else
echo "Photo not submitted";
The message returned from ajax is: Photo not submitted. Please help..!!
You are uploading, not the image, you uploading it name.
$("#statusform").serialize()
return a string, image is a blob. Try to use some jQuery plugins, for example.
You can upload file asynchronously by iframe as described in article:
http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/