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

Posted by Daniil Harik on Stack Overflow See other posts from Stack Overflow or by Daniil Harik
Published on 2010-04-07T09:30:57Z Indexed on 2010/04/07 9:33 UTC
Read the original article Hit count: 693

Filed under:
|
|
|

Hello,

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 style="display: none;">
                <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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about upload