How to quickly use jquery post to post files?

Question

I have this form and when upload it say undefined index 'banner'. I was able to get other input forms but the "file" is not working, I want something as simple as that javascript code.

<form id="" enctype="multipart/form-data" method="post" action="#" class="courses_create_form">
<input name="banner" type="file" class="form-control" id="banner">
<input name="banner" type="submit" class="form-control" value="upload">

</form>

Here is the jquery script handling it...

<script>
     $(document).on('submit', '.courses_create_form', function(e) {
    e.preventDefault();

    var banner = $("#banner").val();


    $.post("uploads/process.php",
        {

            banner:banner,
            today: 'now'

        },
            function(response,status,Err){
            if(status=='error'){
// error
            }else if(status=='success'){
                $(".notify").html(response);
            }
        });
});
 </script>    

Here is the process.php

<? // process.php
echo $_FILES['banner']['name'];
?>