RSS

Simple steps to better form submission with Uploadify

This entry was posted on Apr 15 2009

EDIT : i have updated this post here

So i really like uploadify and what it offers over swfUpload. However i needed something that could also submit alot of form data along with my upload. I didnt want to manually add each field as using this multiple times would prove rather frustrating. So here is a really simple technique i have put together that you can use that doesn’t involve alot of manual variable referencing.

Step 1

First thing you need is the basic demo going.

Step 2

Then simply download and add the jQuery form plugin found here.
You may now have something that looks like this in your head tag

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery-ext/jquery-validate/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>

in your head tag

Step 3

Create a new function that will act as our new upload function. And replace “#new_doc_upload” with the id of the form with all the input you wish the send to the upload script.

<script type="text/javascript">
function startUpload(id){
	var queryString = '&' + $('#new_doc_upload').formSerialize();
	$('#'+id).fileUploadSettings('scriptData',queryString);
	$('#'+id).fileUploadStart();
}
</script>

Step 4

Replace your start upload link with a link to the new function we made in step 3. In this case we pass our function the our upload id ‘fileUpload’ (You will need to change this to your own).
eg.

<a href="javascript:startUpload('fileUpload')">Start Upload</a>

And hey presto you should now be able to access all your form items using GET in you specified upload script.

Uncategorized

Post a Comment