Post image file failed

Question

I wish to upload an image but the file path is failed to post.

my form:

<form id="postIdeaForm" method="post" action="ideas.php" enctype="multipart/form-data">
<input name="selector" id="selector" type="file" style="position:absolute;width:200px;height:25px;display:none;" />
<div id="postIdeaBtn" class="alignRight postBtn pointer"><strong>post</strong></div>
</form>

javascript

$('#postIdeaBtn').click( function() {
                $("#postIdeaForm").submit();

            });

             $("#postIdeaForm").validate({
             errorElement:"div",
             rules: {
             dateIdea: "required"
             },
             messages: {
             dateIdea: ""
             },
             submitHandler: function() {
             $.post("ideas.php", $("#postIdeaForm").serialize(), 
             function(data) {
                 if(data == 'Success') {
                     window.location.href='date_ideas';
                 }
                });
            return false;
             }
            });

But look at the console, I notice that the file is not posted, am I doing anything wrong?

Answer 1

You can't post files using ajax, you'll need to either use an iframe solution or if you don't mind about cross browser compatability, use FormData.