title: How to pass file data with AJAX and jQuery?
body: <p>I'm trying to create a form that allows a user to fill out data and if an option is checked a div opens up and the user has the option to upload a file along with their submission.</p>
  
  <p>The issue I am having is getting the file to pass thru ajax correct. I can't quite mesh it together properly to get the results that I am looking for which is the file posting to my php script. Here's my code for passing the data:</p>
  
  <pre><code>$(document).ready(function() {
  $("#submit_btn").click(function() { 
  
      var proceed = true;
      //simple validation at client's end
      //loop through each field and we simply change border color to red for invalid fields       
      $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
          $(this).css('border-color',''); 
          if(!$.trim($(this).val())){ //if this field is empty 
              $(this).css('border-color','red'); //change border color to red   
              proceed = false; //set do not proceed flag
          }
          //check invalid email
          var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
          if($(this).attr("type")=="email" &amp;&amp; !email_reg.test($.trim($(this).val()))){
              $(this).css('border-color','red'); //change border color to red   
              proceed = false; //set do not proceed flag              
          }   
      });
  
      if(proceed) //everything looks good! proceed...
      {
          //get input field values data to be sent to server
  
          var search_array = $('input[name="donation"]').map(function(){
                  return $(this).val();
          }).get();
  
          post_data = {
              'user_name'     : $('input[name=full_name]').val(), 
              'user_email'    : $('input[name=email]').val(), 
              'address'   : $('input[name=address]').val(), 
              'address2'  : $('input[name=address2]').val(), 
              'city'  : $('input[name=city]').val(), 
              'state' : $('input[name=state]').val(), 
              'zip'   : $('input[name=zip]').val(), 
              'ccnum' : $('input[name=ccnum]').val(), 
              'expmonth'  : $('select[name=expmonth]').val(), 
              'expyear'   : $('select[name=expyear]').val(), 
              'cardname'  : $('input[name=cardname]').val(),
              'ccvcode'   : $('input[name=ccvcode]').val(),
              'donation'  : $('input[name=donation]:checked').val(),
              'donation_other'    : $('input[name=donation_other]').val(),
              'contact_phone' : $('input[name=contact_phone]').val(),
              'attached_file' : $('input[name=attached_file]').val(),
              'donatecomments'    : $('textarea[name=donatecomments]').val()
          };
  
  
  
  
  
          //Ajax post data to server
          $.post('https://www.xxxxxx.org/catch.php', post_data, function(response){  
              if(response.type == 'error'){ //load json data from server and output message     
                  output = '&lt;div class="error"&gt;'+response.text+'&lt;/div&gt;';
              }else{
  
  
                  output = '&lt;div class="success"&gt;'+response.text+'&lt;/div&gt;';
                  //reset values in all input fields
                  $("#contact_form  input[required=true], #contact_form textarea[required=true]").val(''); 
                  $("#contact_form #contact_body").slideUp(); //hide form after success
                  window.top.location.href = "https://www.xxxxxxxxx.org/thank-you";
              }
              $("#contact_form #contact_results").hide().html(output).slideDown();
          }, 'json');
      }
  });
  
  //reset previously set border colors and hide all message on .keyup()
  $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
      $(this).css('border-color',''); 
      $("#result").slideUp();
  });
  });
  </code></pre>
  
  <p>And my line for file selection:</p>
  
  <pre><code>&lt;input id="attached_file" name="attached_file" style="width:220px;" placeholder="Enter an amount - No $ sign" type="file" value="" onfocus="jQuery(this).prev(&amp;quot;input&amp;quot;).attr(&amp;quot;checked&amp;quot;, true); if(jQuery(this).val() == &amp;quot;Other&amp;quot;) { jQuery(this).val(&amp;quot;&amp;quot;); }" onblur="if(jQuery(this).val().replace(&amp;quot; &amp;quot;, &amp;quot;&amp;quot;) == &amp;quot;&amp;quot;) { jQuery(this).val(&amp;quot;Other&amp;quot;); }" tabindex="18"&gt;
  </code></pre>
  
  <p>How can I get the actual file data to pass as well?</p>