Javascript 无法使用ajax序列化功能将图像插入数据库

我目前在将文件输入（图像）插入数据库时遇到问题，但当我尝试将其插入数据库时，它返回空值，其他文本输入成功插入数据库，图像除外

<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data">
                                    <div class="box-body">
                                        <input type="hidden" name="banner_id" value="1"></input>
                                        <div class="form-group" >
                                            <label for="bannerName">Banner Name 旗帜名称</label>
                                            <input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                         <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);"><br>
                                            <p class="help-block">Your picture size not more than 2MB.  (Only JPEG/JPG/PNG is allowed)</p>
                                        </div>  

                                        <div class="checkbox">
                                            <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>      
                                        </div>
                                    </div><!-- /.box-body -->


                                </form>                  <!-- D

下面是我用来实现Ajax功能的Ajax代码：

$("#testing").confirm({
                     confirm: function (el) {
                        $.ajax({
                            url: 'bannerItem.php',
                            data: el.closest('form').serialize(),
                            type: 'post'

                        }).done(function () {
                            if(!alert('Banner Had Successfully Updated.')){document.getElementById('form').reset();}
                        }).fail(function () {
                            //if the post is failed show an error message if you want
                            alert('Some error occur. Please try again later.');
                        }).always(function () {
                            //this is executed on success and failure
                            $('#myhiddendiv').hide();
                        })
                    }
                });

以下是php代码：

    <?php
    include 'dbConnection.php';

    global $dbLink;


        $target_file = basename($_FILES['uploaded_file']['name']);
        $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
        //Check image file type


            // Make sure the file was sent without errors
            if($_FILES['uploaded_file']['error'] == 0) {

                //Gather all required data
                $item_id = $dbLink->real_escape_string($_POST['banner_id']);
                $name = $dbLink->real_escape_string($_POST['bannerName']);
                $data = $dbLink->real_escape_string(file_get_contents($_FILES['uploaded_file']['tmp_name']));



                //Create the SQL query
                $query = "INSERT INTO banner_item (banner_item_id, banner_name,banner_data,banner_created) VALUES ('{$item_id}','{$name}','{$data}', NOW()
                    )";

                //Execute the query
                $result = $dbLink->query($query);

                //Check if it was successfull
                if($result) {

                    echo 'Name : '.$name.'</br>';
                    echo 'Result : Success! Your file was successfully added!';
                }
                else{
                    echo 'Result : Error! Failed to insert the file'
                       . "<pre>{$dbLink->error}</pre>";
                }
            }
            else {
                echo'An error accured while thefile was being uploaded. '
                   . 'Error code: '. intval($_FILES['uploaded_file']['error']);
            }


        // Close the mysql connection
        $dbLink->close();


    // Echo a link back to the main page
    echo '<p>Click <a href="index.html">here</a> to go back</p>';
    ?>

---

无法通过表单序列化上载文件。如果您的浏览器要求超过IE9，您可以使用XHR上传或
FileAPI
plugin

<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data">
                                    <div class="box-body">
                                        <input type="hidden" name="banner_id" value="1"></input>
                                        <div class="form-group" >
                                            <label for="bannerName">Banner Name 旗帜名称</label>
                                            <input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                         <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);"><br>
                                            <p class="help-block">Your picture size not more than 2MB.  (Only JPEG/JPG/PNG is allowed)</p>
                                        </div>  

                                        <div class="checkbox">
                                            <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>      
                                        </div>
                                    </div><!-- /.box-body -->


                                </form>                  <!-- D

例如：

            $("form#form").submit(function(){
            var formData = new FormData($(this)[0]);

            $.ajax({
                url:'bannerItem.php',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                    if(!alert('Banner Had Successfully Updated.')){location.reload();}
                },
                cache: false,
                contentType: false,
                processData: false
            });

            return false;
        });

更多信息
我已经解决了表单数据函数的问题。我知道FireAPI和XHR2是可以实现的，但是对于像我这样的初学者来说，为了更简单的理解，我认为这是解决我的问题的一个解决方案。谢谢，我希望我能在示例代码方面帮助其他人。：）

<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data">
                                    <div class="box-body">
                                        <input type="hidden" name="banner_id" value="1"></input>
                                        <div class="form-group" >
                                            <label for="bannerName">Banner Name 旗帜名称</label>
                                            <input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                         <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);"><br>
                                            <p class="help-block">Your picture size not more than 2MB.  (Only JPEG/JPG/PNG is allowed)</p>
                                        </div>  

                                        <div class="checkbox">
                                            <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>      
                                        </div>
                                    </div><!-- /.box-body -->


                                </form>                  <!-- D

以下是我在ajax上成功使用的代码：
//使用formDATA功能上传文件和文本

您好，感谢您提供使用XHR2的建议，但我还有一个文本文件要与图像一起插入，我该如何实现这一点？感谢使用FileAPI插件更容易。我想你可以指定可供上传的扩展名。顺便说一句，如果你正在使用AngularJS，我可以帮你制定一个指令。
<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data">
                                    <div class="box-body">
                                        <input type="hidden" name="banner_id" value="1"></input>
                                        <div class="form-group" >
                                            <label for="bannerName">Banner Name 旗帜名称</label>
                                            <input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                         <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);"><br>
                                            <p class="help-block">Your picture size not more than 2MB.  (Only JPEG/JPG/PNG is allowed)</p>
                                        </div>  

                                        <div class="checkbox">
                                            <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>      
                                        </div>
                                    </div><!-- /.box-body -->


                                </form>                  <!-- D