Uploading a file without a full page reload

Question

I'd like to create a page, which uses a local file in JavaScript. I don't need to upload it to the server really and I definitely don't want the page to reload completely.

What are the available options to solve it?

The best I could come up with so far, is to (not perfect, but should work):

• execute a POST from iframe

• retrieve the file via AJAX from the main page

Answer 1

Not all browsers support file uploads via XMLHttpRequest.

The easiest way is to use e.g. this jQuery plugin: http://jquery.malsup.com/form/#file-upload It uses the iframe trick.

Note: You will NOT be able to access a local file without manually selecting it in a file upload form for security reasons.