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

Question

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

以下是我用来执行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>';
    ?>

如果我在没有ajax函数的情况下使用php代码，所有内容都可以插入数据库，但当我使用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

我已经在stackoverflow和谷歌上搜索了几个小时如何解决这个问题，其中大多数都使用XHR2或formData，但我不确定该使用哪一个，也不确定如何将其用于我的代码中，因为我还是一个使用AJAX和PHP函数的新手。如果我在Ajax代码上犯了任何错误，请指导我。感谢并祝您愉快：）

Answer 1

不能通过表单序列化上传文件。如果你的浏览器要求超过IE9，你可以使用XHR上传或FileAPI插件

示例：

function startUpload() {
    var fileInput = document.getElementById("fileInput");
    if (fileInput.files.length == 0) {
        alert("Please choose a file");
        return;
    }
    var progressBar = document.getElementById("progressBar");
    var xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function(e) {
        var percentComplete = (e.loaded / e.total) * 100;
        progressBar.value = percentComplete;
    };
    xhr.onload = function() {
        if (xhr.status == 200) {
            alert("Sucess! Upload completed");
        } else {
            alert("Error! Upload failed");
        }
    };
    xhr.onerror = function() {
        alert("Error! Upload failed. Can not connect to server.");
    };
    progressBar.value = 0;
    xhr.open("POST", "ajax-upload", true);
    xhr.setRequestHeader("Content-Type", fileInput.files[0].type);
    xhr.send(fileInput.files[0]);
}

更多信息请点击此处

Answer 2

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

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

            $("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;
        });