Ajax Upload Problem

I am trying to upload image with custom form fields to make it work butsomehow it is not working..

here is my complete code:


<img id="loading" src="ajax/loading.gif" style="display:none;">
<cfform name="form" action="" method="POST" enctype="multipart/form-data">
<table width="100%" cellpadding="0" cellspacing="0" class="tableForm">
<tr>
<td>Upload Picture File:</td>
</tr>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" tabindex="1"></td>
</tr>
</tbody>
<tfoot>

<tr>
<td>Title:</td>
</tr>
<tr>
<td><cfinput type="text" name="jtitle" id="jtitle" tabindex="2">
<cfinput type="hidden" name="cat_ID" value="2">
</td>
</tr>
<tr>
<td>Contents:</td>
</tr>
<tr>
<td><textarea name="jcontents" id="jcontents" tabindex="3" cols="30" rows="5" title="Add Contents"></textarea></td>
</tr>
<tr>
<td><cfinput name="uploadbutton" type="button" class="submitbtn" id="uploadbutton" onClick="return ajaxFileUpload();" value="Upload"></td>
</tr>
</tfoot>
</table>
</cfform>

Now the uploading stuff here:

<script src="ajax/jquery.js"></script>
<script src="ajax/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});

$.ajaxFileUpload
(
{
url:'doajaxfileupload.cfm',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)

return false;

}
</script>
i am usually using the script provided by Ray Camden.

when i click the upload button, it just error me out that:


ajaxFileUpload() is undefined.

Plz Guide me what's going wrong here