12

I need to upload files using ajax which has to be supported in IE9. I was using FormData as mentioned here. My code looks like this:

var files = new FormData();
JQuery.each($('#file')[0].files, function (i, file) {
    files.append('file', file);
});

$.ajax({
    type: "POST",
    url: '/url',
    cache: false,
    contentType: false,
    processData: false,
    data: files,
    ...
});

This works fine in Safari and Firefox, but fails in IE9 as the FormData is not supported in IE9. I tried sending just as a file by setting:

data: $('#file')[0].files[0]
contentType: 'multipart/form-data'

This fails as the data is sent in url-encoded form and is cannot be parsed at the java side. Any help or pointer on how to solve this will be greatly appreciated. I need something that works across all browsers.

EDIT: I do not need any upload progress bar as the files are usually small. I do not need to upload multiple files. I just need a single file upload.

Community
  • 1
  • 1
Alice
  • 390
  • 2
  • 5
  • 19
  • 1
    I found a similar question here: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – Dan K.K. Nov 20 '12 at 22:38
  • I cannot use specify the action in the form '
    ' as there can be multiple actions, depending on user input. So I have a 'click' action on the upload button, which determines the type of input we got from the user and redirect accordingly. We did have this earlier and it was working, but now the requirement changed to redirect to different url/function depending on user input.
     – Alice Nov 20 '12 at 22:55

1 Answers1

18

Unfortunately you cannot use Ajax (XMLHttpRequest in other words) for sending files, but you can implement a similar behavior using the <iframe/> with a <form method="post" enctype="multipart/form-data"/> that contains an <input type="file"/> which sends a user chosen file using the "natural" way. You can use javascript to call the form.submit() then poll that <iframe/> from parent document to check whether the file upload process is done.

jQuery has a lot of cool plugins for getting this job done, there is my favorite one, for example.

Dan K.K.
  • 5,915
  • 2
  • 28
  • 34