how to do file upload using jquery serialization

ajax, file-upload, jquery, php, serialization

Solution

A file cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript. One of the techniques to achieve this is to use hidden iframes. There's a nice jquery form plugin which allows you to AJAXify your forms and it supports file uploads as well. So using this plugin your code will simply look like this:

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

The plugin automatically takes care of subscribing to the `submit` event of the form, canceling the default submission, serializing the values, using the proper method and handle file upload fields, ...

Problem

So I have a form and I'm submitting the form through ajax using jquery serialization function ``` serialized = $(Forms).serialize(); $.ajax({ type : "POST", cache : false, url : "blah", data : serialized, success: function(data) { } ``` but then what if the form has an `<input type="file">` field....how do I pass the file into the form using this ajax serialization method...printing $_FILES doesn't output anything

Original source

Related problems