title: jquery getJSON file upload?
body: <p>I was wondering if it were possible to upload files using getJSON? Basically I have a form which people can select word docs or pdfs, but my form is processed using getJSON (code below) and I'm not sure how I can incorporate the file upload with getJSON?</p>
  
  <pre><code>&lt;form name="employment" id="employment" enctype="multipart/form-data"&gt;
    &lt;div id="contactform"&gt;
      &lt;div class="information"&gt;
        &lt;label&gt;Full Name: *&lt;/label&gt;
        &lt;input type="text" name="name" id="name" class="inputbox required" /&gt;
      &lt;/div&gt;
      &lt;div class="information"&gt;
        &lt;label&gt;Email Address: *&lt;/label&gt;
        &lt;input type="text" name="email" id="email" class="inputbox required email" /&gt;
      &lt;/div&gt;
      &lt;div class="information"&gt;
        &lt;label&gt;Contact Number: *&lt;/label&gt;
        &lt;input type="text" name="number" id="number" class="inputbox required" /&gt;
      &lt;/div&gt;
      &lt;div class="information"&gt;
        &lt;label&gt;Position: *&lt;/label&gt;
        &lt;select name="position" id="position" class="inputbox required"&gt;
          &lt;option value=""&gt;- Please Select-&lt;/option&gt;
          &lt;?php foreach($this-&gt;Positions as $position) { ?&gt;
          &lt;option value="&lt;?php echo $position-&gt;name; ?&gt;"&gt;&lt;?php echo $position-&gt;name; ?&gt;&lt;/option&gt;
          &lt;?php }; ?&gt;
          &lt;option value="Traineeship"&gt;Traineeship&lt;/option&gt;
          &lt;option value="Clerkship"&gt;Clerkship&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="information"&gt;
        &lt;label&gt;Cover Letter:&lt;/label&gt;
        &lt;textarea name="letter" id="letter" class="inputbox"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="information"&gt;
        &lt;label&gt;Please upload your resum&amp;eacute; in PDF or Word format (less than 2MB)*:&lt;/label&gt;
        &lt;input type="file" name="resume" id="resume" class="inputbox" /&gt;
      &lt;/div&gt;
      &lt;input type="submit" name="submit" id="submit" value="Submit" class="submitButton" /&gt;
    &lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's my jquery, but I'm not sure if it will pass along the file this way?</p>
  
  <pre><code>$("#employment").validate({              
      submitHandler: function(form) { 
        var name  = $("#name").val();
        var email     = $("#email").val();
        var number    = $("#number").val();
        var position  = $("#position").val();
        var letter    = $("#letter").val();
        var resume    = $("#resume").val();
  
        $.getJSON("/index.php?option=com_json&amp;format=raw", { task: "employment", e_name: name, e_email: email, e_number: number, e_position: position, e_letter: letter, e_resume: resume }, function(data) {
          var response = eval(data);
          if (response["result"] == 1) {
            $("form#employment").hide();
            $("#loading").empty();
            $("#loading").append("&lt;strong&gt;Thank you for submitting your resume.&lt;/strong&gt;");
          } else if (response["result"] == 3) {
            alert("There has been an error, please try again.");
            $("#loading").empty();
            $("form#employment").show();
          } else {
            alert("There has been an error, please try again.");
            $("#loading").empty();
            $("form#employment").show();
          };
        });
      }
    });
  </code></pre>