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

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;
        });

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

2 个答案: