ajax upload file form

I have two forms, one for uploading a file and another for filling the form with information. I need to upload the file without refreshing the page first and then submit the form 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 THE AJAX: I know how to submit data using ajax but I need help for how to upload a file using ajax without refreshing the page, and then take the name of that file, send 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>