Question

I am trying to upload an image from inside a JQuery modal. The form is hidden in php and once a link is clicked the modal window appears, along with a very simple form, just a file upload field

<form action="" method="post" enctype="multipart/form-data" id="uploadprofileimage"    name="uploadprofileimage">
        <label for="image">Upload a picture of the item:</label>
        <input type="file" name="image" id="image">
        </form>

However when the upload button is clicked the form is serialized and sent. To try and resolve this issue I have post back to the page and when I dump $_POST and $_FILES the arrays are empty, where am I going wrong? I have done post before when I have posted variables to PHP, but for some reason I cannot post a form!

Below is my JQuery code, hope someone can help!, Thanks

$("[href='#avatar']").click(function() {
            $("#profile-upload").dialog({
                title: 'Add a profile image',
                width: 400,
                height: 200,

                buttons:[  

                { 
                text: 'Upload',
                click: function(e) {
                    e.preventDefault();
                    var post = $("#uploadprofileimage").serialize();
                    $.post("profiles.php", post, function(data){
                        console.log(post);
                        console.log(data);


                    },'json');


                }


                },

                { text: 'Close', click: function() { $(this).dialog('close');}}



                ]


            });
    });

Answer 1

You cannot upload files using AJAX. You can however use one of many plugins that simulate AJAX action. They do this by creating an iframe in the background and submitting the data that way. Try searching for jQuery file upload plugins.