Upload file using ajax request [duplicate]

Question

Possible Duplicate:
How can I upload files asynchronously with JQuery?

I'm submiting my forms like this.

  var url = event.currentTarget.action;
  var values = $(this).serialize();

  $.post(url, values, function (data) {
      //some code
  });

Now I have a form with a file upload input. With this code the file isn't uploaded.

How can I include the file into this ajax request ? I don't want to use any plugin if possible(except jQuery).

Answer 1

You can only upload files with AJAX but only in some modern browsers. I know it works in Firefox and Chrome (That's all I've tested so far).

Theres some good info here about it: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

As an alternative there's a great plugin for that sort of thing:

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

This part may be of relevance to you:

http://jquery.malsup.com/form/#file-upload

It uses iframes to post to to upload in a background style of way.