How can I do a File Upload and return results to the same page?

Question

I need to do a file upload and return the results to the same page. The <form> also has a couple of data fields that will be sent in the POST.

I can't use HTML 5 due to limited browser support, and unfortunately the AJAX file upload solutions I've seen all use HTML 5. I could do the POST in Javascript but I haven't seen a file upload done like this.

My server is written in Java but that shouldn't matter.

Is there a way to get the results of this kind of POST to return to the same page?

Answer 1

I would suggest you take a look at how the jQuery Form Plugin does "legacy" file uploads. Basically it uses an iframe to submit the form in the background. http://malsup.com/jquery/form/#file-upload

Answer 2

The generally accepted method outside of Flash, Silverlight, and the HTML5 File API, is to have your <form> post to an invisible <iframe> on the page.

The <iframe> location is the page or file handler that uploads your file under the hood. You then have a javascript function running on the main page, that polls your server periodically and checks to see if the download has been completed.

When you upload the file to the <iframe> , you need some way of identifying the upload that both the client and server know. One way to do this is to generate a GUID on the client, and post it along with the file and your other data fields. The server should keep hold of that GUID before receiving the file data and track the progress of the upload by linking the progress and the GUID together. Since the client generated already knows the GUID, it can send requests to the server to get the progress of that upload by sending the what it generated.

Answer 3

I ended up using the jQuery Form Plugin . It supports sending basic auth credentials in the header with this option:

headers  : { Authorization: basicAuthCredentials}

which I also need to do.