Question

I’ve added a file input to a form, and I can’t seem to get the file to go through. Here is the form (minus all the other fields)

<form method="post" action="ajax_mm_order.php" enctype="multipart/form-data" id="mm_form">
<input id="image_file" type="file" name="photo_for_card" />
<input type="button" id="submit_button" value="Place Order" />
</form>

The javascript/jquery that submits it:

$.ajax({
            type: "POST",
            url: "ajax_mm_order.php",
            data: $("#mm_form").serialize(),
            success: function(msg){
                $(".form_style_header").fadeOut("slow");
                $(form_css).fadeOut("slow", function(){
                    $(form_complete).fadeIn("slow");
                });

            }
        });

when the form data hits ajax_mm_order.php, all of the other data is recieved just fine, but $_FILES is completely empty. Is there something wrong with my ajax call?

Answer 1

You can’t send a file through ajax. The most accepted way is really just a glorified ‘hack’ – many libraries basically create an iframe, and then post the contents from that iframe to your url (and since it’s only an iframe, doesnt cause a full refresh of your parent page).

I’d look into finding a nice ajax file upload library you want to use. I personally like this library.