javascript - How to pass file data with AJAX and jQuery?

Question

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.

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:

$(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" && !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 = '<div class="error">'+response.text+'</div>';
            }else{


                output = '<div class="success">'+response.text+'</div>';
                //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();
});
});

And my line for file selection:

<input id="attached_file" name="attached_file" style="width:220px;" placeholder="Enter an amount - No $ sign" type="file" value="" onfocus="jQuery(this).prev(&quot;input&quot;).attr(&quot;checked&quot;, true); if(jQuery(this).val() == &quot;Other&quot;) { jQuery(this).val(&quot;&quot;); }" onblur="if(jQuery(this).val().replace(&quot; &quot;, &quot;&quot;) == &quot;&quot;) { jQuery(this).val(&quot;Other&quot;); }" tabindex="18">

How can I get the actual file data to pass as well?

Answer 1

You'll need to store the file as FormData. You can still send the form data along with your file attachment by append your form data to the FormData object See below example:

NOTE: This example is assuming it's an xml file. If it's not an xml file, don't use the xml portion (last 3 lines in the if statement).

JavaScript

// #fileUpload is to a input element of the type file
var file = $('#fileUpload')[0].files[0]
var fd = new FormData();
fd.append('theFile', file);
$.ajax({
    url: '...',
    type: 'POST',
    processData: false,
    contentType: false,
    data: fd,
    success: function (data, status, jqxhr) {
        //success code
    },
    error: function (jqxhr, status, msg) {
        //error code
    }
});

C#

protected void Page_Load(object sender, EventArgs e)
{        
    try
    {
        foreach (string file in Request.Files)
        {
            var fileContent = Request.Files[file];
            if (fileContent != null && fileContent.ContentLength > 0)
            {
                Stream stream = fileContent.InputStream;
                BinaryReader br = new BinaryReader(stream);
                byte[] binaryData = br.ReadBytes(fileContent.ContentLength);
                string xml = System.Text.Encoding.Default.GetString(binaryData);
                XmlDocument xmlDoc = new XmlDocument();
                xmlDoc.LoadXml(xml);
            }
        }
    }
    catch (Exception ex)
    {

    }
}