Few months ago I wrote a jQuery plugin for AJAX file uploading. It’s based on the idea used by WebToolkit Ajax file upload.

The code is here.

How to use it?

$(document).ready(function() {
	$('#your_form_id').uploadForm('your_upload_script', {
		'onStart': function() {
			alert('Uploading...');
			return true;
		},
		'onComplete': function(data) {
			alert('Complete: '+data);
		},
		'onError': function(cause) {
			alert('Error: '+cause);
		},
		'timeout': 5000
	});
});

How does it work?

1. Page loads, and the form’s submit event is hooked;
2. User selects a file, and clicks in the submit button;
3. The hook function is triggered by the submit event, creates an iframe, and appends it to the document root;
4. The onStart callback is called;
5. The form’s target property is set to the iframe element, avoiding the full page reload.
6. The submit event is executed normally;
7. The onComplete callback is called after the iframe reload;