ColdFusion, jQuery, And "AJAX" File Upload Demo

// When the DOM loads, initailize the form to upload the files
// using an AJAX "like" call rather than a form submit.
$(
	function(){
		// Get a reference to the form we are going to be
		// hooking into.
		var jForm = $( "form:first" );
 
		// Attach an event to the submit method. Instead of
		// submitting the actual form to the primary page, we
		// are going to be submitting the form to a hidden
		// iFrame that we dynamically create.
		jForm.submit(
			function( objEvent ){
				var jThis = $( this );
 
				// Create a unique name for our iFrame. We can
				// do this by using the tick count from the date.
				var strName = ("uploader" + (new Date()).getTime());
 
				// Create an iFrame with the given name that does
				// not point to any page - we can use the address
				// "about:blank" to get this to happen.
				var jFrame = $( "<iframe name=\"" + strName + "\" src=\"about:blank\" />" );
 
				// We now have an iFrame that is not attached to
				// the document. Before we attach it, let's make
				// sure it will not be seen.
				jFrame.css( "display", "none" );
 
				// Since we submitting the form to the iFrame, we
				// will want to be able to get back data from the
				// form submission. To do this, we will have to
				// set up an event listener for the LOAD event
				// of the iFrame.
				jFrame.load(
					function( objEvent ){
						// Get a reference to the body tag of the
						// loaded iFrame. We are doing to assume
						// that this element will contain our
						// return data in JSON format.
						var objUploadBody = window.frames[ strName ].document.getElementsByTagName( "body" )[ 0 ];
 
						// Get a jQuery object of the body so
						// that we can have better access to it.
						var jBody = $( objUploadBody );
 
						// Assuming that our return data is in
						// JSON format, evaluate the body html
						// to get our return data.
						var objData = eval( "(" + jBody.html() + ")" );
 
						// "Alert" the return data (this should
						// be an array of the server-side files
						// that were uploaded).
						prompt( "Return Data:", objData );
						 // Remove the iFrame from the document.
						// Because FireFox has some issues with
						// "Infinite thinking", let's put a small
						// delay on the frame removal.
						setTimeout(
							function(){
								jFrame.remove();
							},
							100
							);
					}
					);
 
 
				// Attach to body.
				$( "body:first" ).append( jFrame );
 
				// Now that our iFrame it totally in place, hook
				// up the frame to post to the iFrame.
				jThis
					.attr( "action", "upload_act.cfm" )
					.attr( "method", "post" )
					.attr( "enctype", "multipart/form-data" )
					.attr( "encoding", "multipart/form-data" )
					.attr( "target", strName )
				;
			}
			);
	}
	);

For Cut-and-Paste