Ewen's Files

Really simple jQuery Ajax File Upload plugin

Well, it's not really Ajax uploading considering file upload with ajax is not possible, but the end result is similar.

This jQuery ajax upload plugin creates a hidden iframe and sets the form's target attribute to post to that iframe. When the form is submitted, it is posted (including the file uploads) to the hidden iframe. Finally, the plugin collects the server's response from the iframe.

You can of course easily upload multiple files simply by including more file fields.

Changelog

Version 1.1
Bug
Load event would get attached each time the form was submitted, resulting in the event being attached multiple times.
New Feature
Treat the server response as a JSON object and parse using jQuery.parseJSON().
New Feature
Returning false in the post : function () callback function will abort the submission of the form.

jQuery Ajax Upload API;

iframeID : 'iframe-post-form'
The iframe's ID & name.
json : false
Treat the server response as a JSON object, apply jquery.and return the parse JSON object (new in version 1.1).
post : function ()
When the form has been submitted.
Returning false in this call back function will abort the submission of the form (new in version 1.1).
complete : function (response)
After everything has been submitted and completed.

Thanks to Federico Rampazzo for spotting a flaw in the PHP code of this page.

Demo

File upload form demo

This file upload demo will only allow images.

Like my Stuff?

All the stuff I create and host on this site is free for personal and commercial use unless otherwise stated.

If you find a use for any of it and would like to show your appreciation you can send me a donation via PayPal.

Also it would be great if you could like, +1 or tweet any of the projects that you use.

Cheers, Ewen

Project Information

Name
Iframe Post Form
Date Created
Monday 18th July 2011
Description
This jQuery plugin creates a hidden iframe and sets the form's target to post to that iframe. When the form is submitted it is posted (including files) to the hidden iframe. Finall…
Project Resources

Latest Projects

Project
Equal Height Columns
Date Created
Monday 18th July 2011
Description
This jQuery plugin sets the height of selected elements equal to the height of the highest element. Any number of elements can be passed. The various configuration options includ…
Project
Iframe Post Form
Date Created
Monday 18th July 2011
Description
This jQuery plugin creates a hidden iframe and sets the form's target to post to that iframe. When the form is submitted it is posted (including files) to the hidden iframe. Finall…