jQuery Ajax Submit form elements with multipart/form-data (Image/Video)

Question

I am trying to submit a form via ajax using:

$(document).ready(function(){
$("#ajax-form").submit(function(){
    $.post(
        "albums.php",
        $("#ajax-form").serialize(),
        function(){

        }
    );
    return false;
});

});

I am posting data to the facebook graph api. I need to send the form text fields and image data to the remote facebook api server. Is this possible? Thanks!

Solution 1

This is a simple jQuery plugin to implement and works for me for running file uploads seemingly via AJAX. It is meant to run on forms of all kinds, but it does support file uploads. Though it uses iFrames, it runs everything silently without notice, and it works flawlessly every time for me:

http://jquery.malsup.com/form/

Solution 2

Is this possible? Thanks!

No, doesn't look like it:

How can I upload files asynchronously?

Comments

[Hyangelo]

Save for the HTML5 File API, the only way really is to use an iframe with a form and submit your file using that iframe's form in the background. It is not the most straightforward way because you have to constantly check if the form has already submitted or if it has failed and handle accordingly. Cue in the libraries featured in jen's comment which already does that for you.