To start things off, I've looked at a few similar problems on here but still can't resolve my issue here.
HTML:
<input type="file" name="filename" multiple="multiple" data-classIcon="icon-plus" data-buttonText="Upload Your File">
PHP:
$name = $_FILES['filename']; 
$temp_name = $_FILES['filename']['tmp_name']; 
if(isset($name)){
    if(!empty($name)){ 
        $location = 'uploads/'; 
        if(move_uploaded_file($temp_name, $location.$name)){
            echo 'uploaded';
        }
    } 
} else {
    echo 'error: not uploaded';
}
JS:
$('#cc-submit').on('click', function(e){
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "balanced/example.php",
                data: $('#creditcardpost').serialize(),
                success: function(data)
                {
                    alert(data);                
                }
            });
        });
Error:
Undefined index: filename in /public_html/script.php on line xx (the two lines that collect the $_FILES variables.
"error: not uploaded"
 
    