javascript - 无法使用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 和 google 中搜索了几个小时如何解决这个问题，其中大多数使用 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]);
}

更多信息HERE