jQuery upload file using jQuery's ajax method (without plugins)

Question

At moment I want to implement picture upload without using any plug-ins.

My upload form looks like this

<form action="/Member/UploadPicture" enctype="multipart/form-data" id="uploadform" method="post">
            <span>
                <div class="upload" id="imgUpl">
                    <h3>Upload profile picture</h3>
                    <div class="clear5"></div>
                    <input  type="file" name="file" id="file"  />
                    <button class="btn-bl"  id="upComplete"><span>Upload</span></button>
                </div>

            </span>
            </form>

And my jQuery code is:

  $('#upComplete').click(function () {
            $('#up').hide();
            $('#upRes').show();

            var form = $("#uploadform");

            $.ajax({
                type: "POST",
                url: "/Member/UploadPicture",
                data: form.serialize(),
                success: function (data) {
                    alert(data);
                }
            });

            $.fancybox.close();
            return false;
        });

If I open firebug, I can see that ajax() method does simple form post (not multi-part) and POST content is empty

Is it possible to do files upload using jQuery ajax() method or should I do this in any other way?

Thank You very much

Answer 1

jQuery ajax does not support file uploads and implementing this manually might be cumbersome. I would suggest you looking at the jQuery form plugin.

Of course you could always check out the source code of the plugin to see how it is implemented if you don't want to include it (it uses a hidden iFrame as files cannot be uploaded with AJAX) but why doing it if you could use it directly :-)

Here's an example how your code might look like:

$(function() {
    $('#uploadform').ajaxForm();
});

also make the upload button a submit button:

<button class="btn-bl" id="upComplete" type="submit">
    <span>Upload</span>
</button>

Answer 2

AJAX or more appropriately XMLHttpRequest does not support file uploads yet. There are workarounds such as uploading through an <iframe>, but its rather cumbersome. Your time will be better spent in building your applications rather than reinventing these solutions.

But if you're curios as to how it works internally, then feel free to checkout the source code of some of the plugins that offer this functionality. A very simple explanation can be found at this link - http://www.openjs.com/articles/ajax/ajax_file_upload/

Basically, you change the form target to submit inside an <iframe>, thus avoiding the page refresh, and simulating AJAX, which it isn't really, but who cares - the end user can't tell.

A minimal example for an iframe based upload may look like this:

​$("#upComplete").click(function() {
    // create a dynamic iframe, or use existing one 
    var iframe = $("<iframe id='f' name='f' src=''>");
    // attach a load event to handle response/ know about completion
    iframe.load(function() { alert('complete'); });
    iframe.appendTo('body');
    // change form's target to the iframe (this is what simulates ajax)
    $('#uploadForm').attr('target', 'f');
    $('#uploadForm').submit();
});​​​​​​

Note that this does not do any response handling, but just sends the picture to the server. To handle the response, a callback must be written for the iframe's load event.