отправить по входному файлу и тексту в одной форме, используя 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...!!! ";}
?>

Но в конце я получаю следующую ошибку каждый раз:

Примечание : неопределенный индекс: img_data в \ insertbook. php on line 6 Примечание : неопределенный индекс: img_data в \ insertbook. php on line 22 * ​​1028 * Примечание : неопределенный индекс: img_data в * \ insertbook. php on line 23 Уведомление : неопределенный индекс: img_data в *** insertbook. php on line 24 Предупреждение : file_get_contents (): имя файла не может быть пустым в * \ insertbook. php в строке 24 Примечание : неопределенный индекс: img_data в *** \ insertbook. php on line 34 Новая запись успешно создана

Но, в конце концов, в базе данных нет файлов и создается только одна пустая запись, надеюсь, вы поможете мне разобраться с проблемой. Спасибо

Answer 1

Вы должны попробовать это

Удалить атрибуты action method и enctype из from элемента тега.

Попробуйте отправить данные с помощью new FormData() в ajax.

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

Answer 2

Чтобы проверить ввод файла, если он установлен или нет, это.

Измените это искусство в вашем условии if

isset($_FILES['img_data'])

На это

isset($_FILES['img_data']['name'])