title: Ajax contact form attachment
body: <p>I've made a contact form which works, but now I need it to be able to send an attachment too. I have found some examples but I cannot get them to work with my existing code. I'd prefer to keep as much of the form intact as the css is the way I'd like it.
  I've omitted the the captcha and css in the code below.</p>
  
  <pre><code>&lt;div class="contact-box" id="contact-form"&gt;
      &lt;div class="contact-form"&gt;
          &lt;form name="contact-form" action=""&gt;
              &lt;div class="name"&gt;
                  &lt;span class="fa fa-user"&gt;&lt;/span&gt;
                  &lt;input id="name" placeholder="Name"&gt;
                  &lt;label class="error" for="name" id="name_error"&gt;&lt;i class="fa fa-exclamation-triangle"&gt;&lt;/i&gt;Please enter your name.&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="email"&gt;
                  &lt;span class="fa fa-envelope"&gt;&lt;/span&gt;
                  &lt;input id="email" placeholder="Email"&gt;
                  &lt;label class="error" for="email" id="email_error"&gt;&lt;i class="fa fa-exclamation-triangle"&gt;&lt;/i&gt;Please enter your email address.&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="message"&gt;
                  &lt;span class="fa fa-pencil"&gt;&lt;/span&gt;
                  &lt;textarea id="message" placeholder="Your Message"&gt;&lt;/textarea&gt;
                  &lt;label class="error" for="message" id="message_error"&gt;&lt;i class="fa fa-exclamation-triangle"&gt;&lt;/i&gt;Please enter your message&lt;/label&gt;
              &lt;/div&gt;
              &lt;label class="attachment"&gt;
                  &lt;input type="file" id="fileattachment"/&gt;
                  &lt;span&gt;Upload Booking Request Form&lt;/span&gt;
              &lt;/label&gt;
              &lt;div class="submit"&gt;
                  &lt;input type="submit" name="submit" class="buttonsubmit" id="contact" value="Send"&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="contact-box"&gt;
      &lt;div class="contact-confirmation"&gt;
          &lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt;
          &lt;h3&gt;Thanks for your message.&lt;/h3&gt;
          &lt;h4&gt;We'll be in touch soon!&lt;/h4&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $(function() {
          //Hide send confirmation
          $(".contact-confirmation").hide();
  
          //Validate form
          $('.error').hide();
          $("input#contact").click(function() {
              $('.error').hide();
  
              var name = $("input#name").val();
              if (name == "") {
                  $("label#name_error").show();
                  $("input#name").focus();
                  return false;
              }
  
              var email = $("input#email").val();
              if (email == "") {
                  $("label#email_error").show();
                  $("input#email").focus();
                  return false;
              }
  
              var message = $("textarea#message").val();
              if (message == "") {
                  $("label#message_error").show();
                  $("textarea#message").focus();
                  return false;
              }
  
              //Attachment part???
              var attachment = $("#fileattachment")[0].files
  
              //Send form
              var dataString = 'name=' + name + '&amp;email=' + email + '&amp;message=' + message + '&amp;attachment=' + attachment;
              jQuery.ajax({
                  type: "POST",
                  url: "processemail.php",
                  data: dataString,
                  success: function() {
                      jQuery(".contact-confirmation").fadeIn(1000);
                      jQuery(".contact-form").hide();
                  }
              });
              return false;
          });
      });                 
  
  &lt;/script&gt;
  
  
  //processemail.php
  
  &lt;?php
  
  $name = $_POST["name"];
  $email = $_POST["email"];
  $message = $_POST["message"];
  $sendto = $_POST["sendto"];
  
  $sendto = 'overhere@example.com';
  
  $headers = "From: " . $email . "\r\n";
  $headers .= "Reply-To: ". $email . "\r\n";
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";  
  
  $message = '&lt;html&gt;&lt;body&gt;&lt;strong&gt;From: &lt;/strong&gt;' . $name . '&lt;br /&gt;&lt;strong&gt;Email: &lt;/strong&gt;' . $email . '&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;Message: &lt;/strong&gt;&lt;br /&gt;' . $message . '&lt;/body&gt;&lt;/html&gt;';
  
  mail($sendto, $subject, $message, $headers);
  
  ?&gt;
  </code></pre>