How to pass file data with AJAX and jQuery?
<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>