title: using html5 for file upload with ajax and jquery
body: <p>So i am trying to upload an image along with form data to server. I'm using FileReader API to convert image to data and upload to server. I'm following the code similar to <a href="https://stackoverflow.com/questions/4006520/using-html5-file-uploads-with-ajax-and-jquery">HTML5 uploader using AJAX Jquery</a>. </p>
  
  <p>The data is converted in jquery, but nothing is being sent to server and there is no error generated. </p>
  
  <pre><code>$('#formupload').on('submit', function(e){
      e.preventDefault();
      var hasError = false;
      var file = document.getElementById('file').files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = shipOff;
  
      function shipOff(event) {
          result = new Image(); 
          result.src = event.target.result;
          var fileName = document.getElementById('file').files[0].name; 
          $.post('test.php', { data: result, name: fileName });
      }
  </code></pre>
  
  <p>PHP Code</p>
  
  <pre><code>&lt;?php
  $data = $_POST['data'];
  $fileName = $_POST['name'];
  echo $fileName;
  $fp = fopen('/uploads/'.$fileName,'w'); //Prepends timestamp to prevent overwriting
  fwrite($fp, $data);
  fclose($fp);
  $returnData = array( "serverFile" =&gt; $fileName );
  echo json_encode($returnData);
  ?&gt;
  </code></pre>
  
  <p>Is the problem due to large image file or FileReader API?</p>