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>