javascript - 使用 ajax 通过输入文件和文本以一种形式发布

Question

我使用ajax在表单中发布文件和文本，当我同时使用文件和文本输入时，我遇到了麻烦，这是我的表单:

    <form action="insertbook.php" method="post" id="addBookForm" enctype="multipart/form-data">
        <table >
        <!-- 1- IMAGE -->
        <tr>
            <td>Image:</td>
            <td>
                <input accept="image/gif, image/png, image/jpeg, image/jpg"
                    type="file" name="img_data" id="img_data">
            </td>
        </tr>

        <!-- 2- NAME-->
        <tr>
            <td>Book Name: </td>
            <td >
                <input type="text" name="title" id="title">
            </td>
        </tr>
        <!-- 3- CATEGORY -->
        <tr>
            <td>Book Cat: </td>
            <td>
                <select id="cat_dropdown" onchange="selectionCatchange()">
                        <?php for ($i=0; $i< sizeof($cats); $i++ ) { 
                        echo '<option  value="'.$cats[$i]['id'].'" >'. $cats[$i]['cat_name'] .'</option>';
                         } ?>
                </select>
                <?php echo 
                '<input  id="cat_id" name="cat_id" value="'. $cats[0]['id'] .'"  type="hidden">' ;
                ?>
            </td>
        </tr> 

        <!-- SUBMIT -->
        <tr>
            <th colspan="2" >
                <input id="insertbook" type="submit" name="submit" >
            </th>
        </tr>
    </table>
</form>

在 Javascript 代码中，我们有:

$("#addBookForm").submit(function(e) {
    /* Stop form from submitting normally */
    e.preventDefault();
    /* Get some values from elements on the page: */
    var title = document.getElementById('title').value;
    var img_data = $('#img_data').prop('files')[0];
    var cat_id = document.getElementById('cat_id').value;
    var submit = "submit";
    $.ajax({
        url: "insertbook.php",
        type: "POST",
        data: {'title':title,
                 'img_data':img_data,
                'cat_id':cat_id,
                'submit':submit
                },
        dataType:'html',
        success: function(data){
          console.log(data);
        },
        error:function(data){
            alert(data);
        }
    }); 
});

但是在 PHP 代码中，遵循以下内容:

<?php 
     $conn = mysqli_connect(****);
     mysqli_set_charset($conn,"utf8");
    if( 
        isset($_POST['title']) && 
        isset($_POST['cat_id']) && 
        isset($_POST['submit']) 
        && 
        isset($_FILES['img_data'])
     ){

    $title = $_POST['title'];
    $cat_id = $_POST['cat_id'];

    // THIS SECTION RELATE TO IMAGE UPLOAD
    $name_img = basename($_FILES['img_data']['name']);
    $type_img = strtolower($_FILES['img_data']['type']);
    $data_img = file_get_contents($_FILES['img_data']['tmp_name']);

    $uploadOk = 1;
    // Check file size
    if ($_FILES["img_data"]["size"] > 2097152) {
        echo "Sorry, your file is too large > 2 Mb!";
        $uploadOk = 0;
    }
    if ($uploadOk == 0) {
    echo "Sorry, your image file was not uploaded.";
    // if everything is ok, try to upload file
    } else {
        if (mysqli_query( $conn,"INSERT INTO `books`( `title`, `img`, `cat_id`, `created_at`) VALUES ('$title','".addslashes($data_img)."', '$cat_id', NOW())" )) {
        echo "New record created successfully";
        } else {
            echo "Error: " . "<br>" . mysqli_error($conn);
        }
    }}else{echo "Please set all information...!!! ";}
?>

但最终我每次都会收到以下错误:

Notice: Undefined index: img_data in \insertbook.php on line 6

Notice: Undefined index: img_data in \insertbook.php on line 22

Notice: Undefined index: img_data in *\insertbook.php on line 23

Notice: Undefined index: img_data in ***insertbook.php on line 24

Warning: file_get_contents(): Filename cannot be empty in *\insertbook.php on line 24

Notice: Undefined index: img_data in ***\insertbook.php on line 34
New record created successfully

但最终数据库中没有存储任何文件，只创建了一条空记录，希望您能帮助指导我解决问题。 谢谢

Answer 1

你应该尝试一下

从 from 标记元素中删除 action method 和 enctype 属性。

尝试在ajax中使用new FormData()发送数据。

$("#addBookForm").on('submit', function (e) {
    e.preventDefault();
    var formData = new FormData(this);
    formData.append('submit', 'submit');
    $.ajax({
        type: 'POST',
        url: 'insertbook.php',
        data: formData,
        contentType: false,
        cache: false,
        processData: false,
        success: function (data) {
            console.log(data);
        },          
        error: function (jqXHR, textStatus, errorThrown) {
            alert("Some problem occurred, please try again.");
        }
    });
});