title: initiating file upload within an ajax form WITHOUT submitting the entire form
body: <p>I have a form with several fields. One of these fields requires an upload of documentation (.doc, .docx, .pdf) files. The form is an AJAX form, set up so that whenever a user leaves (blur) a field, the field content is AJAXed through to some php where it'll get saved to a MySQL database. The form for the most part works (I'm new to AJAX and really not good with JS at all) but I cannot seem to get the file upload section to work how I would like. At the moment I am hammering around with this:</p>
  
  <p>The (immediately relevant) html:</p>
  
  <pre><code>   &lt;td class="center" colspan="3"&gt;
      &lt;input type="file" name="myfile"&gt; &lt;input type="submit" value="Upload"&gt;
      &lt;div class="uploadProgress" style="border: 1px dotted green;"&gt;
       &lt;div class="bar"&gt;&lt;/div&gt;
       &lt;div class="percent"&gt;0%&lt;/div&gt;
       &lt;div id="status"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="fileList"&gt;&lt;/div&gt;
     &lt;/td&gt;
  </code></pre>
  
  <p>The JS that is inside a .js file:</p>
  
  <pre><code>// AJAX file uploader
  (function() {
      var bar = $('.bar');
      var percent = $('.percent');
      var status = $('#status');
  
      $('#uploadFile').ajaxForm({
          beforeSend: function() {
              status.empty();
              var percentVal = '0%';
              bar.width(percentVal)
              percent.html(percentVal);
          },
  
          uploadProgress: function(event, position, total, percentComplete) {
              var percentVal = percentComplete + '%';
              bar.width(percentVal)
              percent.html(percentVal);
          },
  
          success: function() {
              var percentVal = '100%';
              bar.width(percentVal)
              percent.html(percentVal);
          },
  
          complete: function(xhr) {
              status.html(xhr.responseText);
          }
      });
  })();
  </code></pre>
  
  <p>I am using jQuery and jquery.form.js</p>
  
  <p>At the moment I am only trying to get this section of the form to talk to the php file, but it seems to want to html5 validate other fields marked as being "required" instead of just ignoring them and uploading the chosen file. How do I get it to do this? I don't want the entire form to be submitted each time someone clicks the upload button, I only want the single file taken care of.</p>
  
  <p>Once I can get it to the php file I can deal with it easily enough, and hopefully work out how to return an output for the resulting list from there. So just getting it there to begin with is the problem.</p>
  
  <p>Link to a fiddle of the page I'm trying to get the file upload function to work in. This shows what is present to begin with. <a href="http://jsfiddle.net/k3dj214k/2/" rel="nofollow">http://jsfiddle.net/k3dj214k/2/</a></p>
  
  <p>Thanks in advance</p>