Ajaxify Multipart Encoded Form (upload Forms)

is there a way to do this? I'm not looking for an alternative plugin (like FancyUpload or Uploadify), I just want to know how I can ajaxify the submission of an upload form.

Solution 1:

If you aren't wanting to use a plugin that couples Flash with JavaScript to provide upload progress, you can try a few things:

1. Use something like this apache module (if you are using apache) and make multiple ajax requests to show a progress bar. (Involves an iframe and other workarounds to appear like an AJAX submit)
2. Use a normal form submit, but use javascript to show a loader graphic before letting the submit action continue.

You simply can't grab the contents of a file selected by a input element and submit it using XMLHTTPRequest. You need to either do a normal POST or use Flash.

Solution 2:

i have seen this done with an iframe shin, something like this: http://www.openjs.com/articles/ajax/ajax_file_upload/

although i would not condone the usage of iframes normally :D

Solution 3:

Not sure of what you mean by "ajaxify" but as Doug stated, you cannot use an xhr to send the content of a file to the server. If you want to avoid the refresh of the page containing the form, you can use an invisible iframe as the target of the form.

Solution 4:

Valums Ajax Upload

This is one of the only pure JavaScript solutions available. It takes advantage of newer browser technologies, but also degrades well to work with older browsers (like IE 6) by using the iframe method.

I have used this solution and have been very happy with the results.