Javascript 使用ajax将输入文件和文本以一种形式发布

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

图片：
书名：
图书目录：

在Javascript代码中，我们有：

$（“#addBookForm”）.submit（函数（e）{
/*阻止表单正常提交*/
e、 预防默认值（）；
/*从页面上的元素获取一些值：*/
var title=document.getElementById（'title'）。值；
var img_data=$（'img_data'）.prop（'files'）[0]；
var cat_id=document.getElementById（'cat_id'）。值；
var submit=“submit”；
$.ajax({
url:“insertbook.php”，
类型：“POST”，
数据：{'title'：标题，
“img_数据”：img_数据，
“猫id”：猫id，
“提交”：提交
},
数据类型：'html'，
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（数据）{
警报（数据）；
}
}); 
});

但在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...!!! ";}
?>

---

检查文件输入是否已设置，如下所示

在您的if条件下更改此艺术

isset($_FILES['img_data'])

对此

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

你应该试试这个

从标记元素的
中删除
操作
方法
和
enctype
属性

尝试在ajax中使用
newformdata（）
发送数据

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

您可以在浏览器控制台中检查xhr。第一个问题是，虽然您的表单有
enctype=“multipart/form data”
，但您的
$.ajax
调用没有设置该标题。当我添加
contentType:false、processData:false、
和change
数据时：{'title'：title，'img_data'：img_data，'cat_id'：cat_id，'submit'：submit}，
to
var formData=new formData（this）；
then
data:formData，
我的问题解决了，谢谢You@HajAli我的荣幸！