Ajax function updates when using the 'fileElementId' attribute to upload a file

Question

My Ajax function updates when I use the 'fileElementId' attribute to upload a file. The image is saved to the database using the attribute 'fileElementId' , but it destroys the purpose of downloading the file via ajax. Any help would be appreciated:

This is my ajax function.

<script>
var frm = $('.wrefresh');

frm.submit(function (ev)
{

    ev.preventDefault();

    var postdata = $(this).serialize();
    var path = $(this).attr("action");
    var mehtodtype = $(this).attr("method").toUpperCase();

    // Clear fields data. (password).
    $('form :input[type=password]').attr('value','');

    // Remove selected pictures field.
    $('#Picture').attr('src', '../../img/User No-Frame.png');

    alert(postdata);

    $.ajax
    ({
        $.ajaxFileUpload
        ({
            fileElementId: 'file_browse'
        }),
        type: mehtodtype,
        url: path,
        data: postdata,


        success: function(data) 
        {
           alert(data);
        }
    });
});
</script>

HTML:

                                    <form class="wrefresh" action="../Code Files/User.php" method="post" enctype="multipart/form-data">

                                            <div id="photo_settings2" style="margin-left:74px;">
                                                    <img id="Picture" src="../../img/User No-Frame.png"/>       
                                            </div>

                                            <br><br><br><br>

                                            <div id='Upload_Panel' style="margin-left: 32px;">
                                                    <input name='file' type='file' id='file_browse' onchange="readURL(this,'Picture')" style="cursor: pointer;"/>
                                            </div>

                                            <div id="delete" style="margin-top: -40px; margin-left: 198px; cursor: pointer">
                                                    <img src="../../img/Delete_Panel.png">
                                            </div>

                                            <div style="margin-left:144px; margin-top:-15px"></div>

....
</form>

php code:

                    // Executes a statement.
                    $check = oci_execute($result);

                    $UploadDirectory = '/wamp/www/img/Users/Users/'.basename($_FILES['file']['name']);
                    if(move_uploaded_file($_FILES['file']['tmp_name'], $UploadDirectory))
                    {
                        //die('Success! File Uploaded.');
                    }

                    else
                    {
                        //die('error uploading File!');
                    }

Answer 1

jquery javascript, javascript , enctype = "multipart/form-data". ajax submit http://jquery.malsup.com/form/

Answer 2

, .

• contentType: false
• processData: false

: var postdata = new FormData($(this)[0]);

 <script>

` var frm = $('.wrefresh');`

    frm.submit(function (ev)
    {

            ev.preventDefault();

            var postdata = new FormData($(this)[0]);
            var path = $(this).attr("action");
            var mehtodtype = $(this).attr("method").toUpperCase();

            // Clear fields data. (password).
            $('form :input[type=password]').attr('value','');

            // Remove selected pictures field.
            $('#Picture').attr('src', '../../img/User No-Frame.png');

            $.ajax
            ({
                type: mehtodtype,
                url: path,
                data: postdata,

                contentType: false,
                processData: false,

                success: function(data) 
                {
                  alert(data);
                }
            });
        });
        </script>