ajax upload file form

I have two form one for upload a file and another for fill the form with information and I need to upload file without refresh the page first and then submit the form all using ajax. And here are the codes.

form_file

<h1>Insert Employee</h1>

        <form id="form">

            <input id="name" placeholder="arabic name.." type="text" name="name_ar"/><br>


            <input id="name" placeholder="english name.." type="text" name="name_en" value=""/><br>


            <input id="name" placeholder="arabic department.." type="text" name="dep_ar" /><br>


            <input id="name" placeholder="english department.." type="text" name="dep_en" /><br>


            <input id="name" placeholder="arabic job.." type="text" name="job_ar"/><br>


            <input id="name" placeholder="english job.." type="text" name="job_en" /><br>


            <input id="name" placeholder="extention#.." type="text" name="ext" /><br>


            <input id="name" placeholder="office#.." type="text" name="office" /><br>


            <input id="name" placeholder="mobile#.." type="text" name="mobile" /><br>

            <input id="email" placeholder="email" type="text" name="email"/><br>

            <br /><br />

            <div class="upload_form">
                <form id='form1'>
                    <input type="file" name="userfile" size="20" />

                    <input type="button" value="upload" id="upload" />
                </form>

                <br/><br/>
            </div>

            <input type="button" value="Click" id="submit"/>
            <input type="reset" value="Reset"/>
        </form>

    </div>

AND HERE IS AJAX: I know how to submit data using ajax but I need help for how to upload file using ajax without refresh the page and then take the name of that file and sent it again with the form and save it to database.

<script>
            $(document).ready(function(){
                $('#upload').click(function(){


                    console.log('upload was clicked');

                    //ajax POST
                    $.ajax({
                        url:'upload/do_upload',
                        type: 'POST',
                        success: function(msg) {
                            //message from validation php
                            //append it to the contact_form id 
                            $('#uploud_form').empty();
                            $('#uploud_form').append(msg);
                        }
                    });
                    return false;
                });





                $('#submit').click(function(){


                    console.log('submit was clicked');

                    //empty msg value
                    //$('#msg').empty();

                    //Take form values
                    var form_data = {
                        name: $('#name').val(),
                        email: $('#email').val(),
                        message: $('#message').val()    
                    };

                    //ajax POST
                    $.ajax({
                        url:'',
                        type: 'POST',
                        data: form_data,
                        success: function(msg) {
                            //message from validation php
                            //append it to the contact_form id 
                            $('#contact_form').empty();
                            $('#contact_form').append(msg);
                        }
                    });
                    return false;
                });
            });

        </script>