Ajax上传文件格式

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>

Not sure whether I get it properly or not. I will try to answer as per my understanding.

1. You need to write server side code which will save the image on server.
2. I believe you are able to make the AJAX call to initiate point 1.
3. From your upload service (point 1), your should return the "relative path" of the image which was uploaded.
4. In success callback of your AJAX call (point 2) you should be able to capture the relative path.
5. Once the relative path has been captured you should add it to DOM or say any element.
6. Then you can start another AJAX call or post back (submit form) based on your requirement.

If this is not the problem then please be specific in what you need and provide more information.

I do it like this and it's work for me :)

   <div id="data">
        <form>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br /><br />
            <input type="button" id="upload" value="upload" />
        </form>
    </div>
  <script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'upload/do_upload',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

                      }
                    });
                });
        });
    </script>