2 Replies Latest reply on Dec 28, 2008 8:38 PM by thenotorious_flag

    Ajax Upload Problem

    thenotorious_flag Level 1
      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