title: $.post serialization for file uploads
body: <p>This seems to work with my dynamically changing forms that don't require uploads.</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://mediahood.net/js/ajaxfileupload.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  
  $("#txtrform").submit(function(){
  
      $.post($(this).attr('action'), $(this).serialize(), function(data) {
          $("#col3").load("/include/txtrpbox/feed.php");
          $('input#txtrinput').val('');
      });
  
      return false;
  });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But when I add this, the AJAX fails and the forms submit normally reloading the page.</p>
  
  
  
  <pre><code>&lt;script type="text/javascript" src="http://mediahood.net/js/ajaxfileupload.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  
      $("#txtrform").submit(function(){
  
          $.post($(this).attr('action'), $(this).serialize(), function(data) {
              $("#col3").load("/include/txtrpbox/feed.php");
              $('input#txtrinput').val('');
          });
  
          return false;
      });
  
      function ajaxFileUpload()
      {
          //starting setting some animation when the ajax starts and completes
          $("#loading")
          .ajaxStart(function(){
              $(this).show();
          })
          .ajaxComplete(function(){
              $(this).hide();
          });
  
          /*
              prepareing ajax file upload
              url: the url of script file handling the uploaded files
                          fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
              dataType: it support json, xml
              secureuri:use secure protocol
              success: call back function when the ajax complete
              error: callback function when the ajax failed
  
                  */
          $.ajaxFileUpload
          (
              {
                  url:$.post($(this).attr('action'),
                  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;
  
      } 
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Why? I would like both my non-upload &amp; upload forms to work. </p>
  
  <p>Im using the script from <a href="http://www.phpletter.com/Our-Projects/AjaxFileUpload/" rel="nofollow">http://www.phpletter.com/Our-Projects/AjaxFileUpload/</a></p>