使用'fileElementId'属性上传文件时刷新Ajax函数

Question

当我使用'fileElementId'属性上传文件时，我的Ajax功能正在刷新。借助'fileElementId'属性将图片保存到数据库，但它通过ajax来破坏文件上传的目的。任何帮助将不胜感激：

这是我的ajax功能。

<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代码：

                    // 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 =＆＃34; multipart / form-data＆＃34;属性。要使用所需的功能，您可以使用名为ajax submit http://jquery.malsup.com/form/

的插件

Answer 2

通过添加这两件事来解决。

1. contentType：false
2. 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>