Webmaster Forum / ColdFusion / Advanced Techniques / December 2008

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