title: Upload file via jquery and ajax
body: <p>I have a script that takes an uploaded csv, and passes the data to a php script via ajax for field validation.  this works perfect.  the php responds with a result, and shows it on the page.  lets say the php script comes back and says "you need to change field X",  the user would then update his csv and click the add file button again in an attempt to retry.  this 2nd attempt fails.  the add files button brings up browse window, but page never shows new csv data.  any idea?</p>
  
  <pre><code> &lt;script&gt;
   $('#thefile').change(function(){
     $('#path').val($(this).val());
   });
  
   $(document).ready(function() {
       $('#thefile').change(function(e) {
      if (e.target.files != undefined) {
          var reader = new FileReader();
  
   var theInfo = "";
   var file = document.getElementById('thefile').files[0];
          reader.onload = function(e) {
   var lenlen = e.target.result.split('\n').length;
   for (i =0;i&lt;lenlen;i++)
   {
      theInfo += "data["+i+"]="+e.target.result.split('\n')[i]+"&amp;";
   }
   $.ajax({
      url: "users/checkCSV.php",
      type: "POST",
      data: theInfo,
      processData: false,
      success: function(result)
   {
   $('#uploadResults').html(result);
   }
  });
  
          };
  
          reader.readAsText(e.target.files.item(0));
      }
  
      return false;
  });
   });
  
   &lt;/script&gt;
  
  
   &lt;form&gt;
   &lt;div id='fileButton'&gt;
   &lt;label class="add-photo-btn"&gt;Add file....
       &lt;span&gt;
     &lt;input type="file" id="thefile" name="thefile" /&gt;
       &lt;/span&gt;
     &lt;/label&gt;
   &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>