title: send form data using ajax to another page
body: <p>i am making a image upload system in which when i select file i want to send that data of the form to another page so that i can work on the other functions required . I tried <code>Serialize</code> but id didnt worked i am trying <code>FormData</code> now but it does not works too.  My code is </p>
  
  <pre><code>$(document).ready(function () {
  
  $("form#cropimage").submit(function(e){
  e.preventDefault();
  var data = new FormData();
  jQuery.each($(this)[0].files, function(i, file) {
      data.append('file-'+i, file);
  });
  $.ajax({
      url: 'modules/uploader/ajax_image.php',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
          alert(data);
      }
  });
      });
      });
  </code></pre>
  
  <p>html </p>
  
  <pre><code>&lt;form id="cropimage" method="post" enctype="multipart/form-data"&gt;
      Upload your image &lt;input type="file" name="photoimg" id="photoimg" /&gt;
      &lt;input type="hidden" name="image_name" id="image_name" value="&lt;?php echo $actual_image_name ;?&gt;" /&gt;
      &lt;input type="submit" name="submit" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>also i am little confused about how to get this data on the other page normally we use <code>$_REQUEST</code> but what to do in this case . As there is a error <code>Uncaught TypeError: Cannot read property 'length' of undefined</code> i cant seem to alert anything too .</p>