使用 formData 使用 ajax 将图像插入数据库

Question

我在从 html 表单上传图片时遇到了一些困难。表单应该能够将图像名称与其他数据一起发送到 php 页面。

我使用 formData 代替序列化函数，因为它不能处理文件数据。

$(document).on('click', '#btn_add', function(){
    var formData = new FormData($(this)[0]);

    $.ajax({
        url:"includes/widgets/insert.php",
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false
        success: function (data) {
            alert(data);

        },

    });

    return false;
});

html表单

 <form id="insert_post" action="includes/widgets/insert.php" method="post" enctype="multipart/form-data" >


         <div class="row">
             <div class="medium-6 columns">
                 <label>First name
                     <input type="text" name="first_name" id="first_name" contenteditable>
                 </label>
             </div>
             <div class="medium-6 columns">
                 <label>Last name
                     <input type="text" name="last_name" id="last_name" contenteditable>
                 </label>
             </div>

             <div class="medium-12 columns">
                 <label>Last name
                 <input  type="file" name="file" id="image" multiple contenteditable>
                 </label>
             </div>
             </div>
              <button type="button" name="btn_add" id="btn_add" class="button btn btn-xs btn-success" >Submit</button>


     </form>

php page

<?php
$connect = mysqli_connect("localhost", "root", "", "myaddboard");

echo $_POST['first_name'];
echo $_POST['last_name'];


echo $image = $_FILES['file']['name'];
echo $image_tmp = $_FILES['file']['tmp_name'];
/*
if(empty($image)){
    echo 'error';
}

move_uploaded_file($image_tmp,"img/$image");
  //$sql = "INSERT INTO posts(post_content, post_author) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')";

if(mysqli_query($connect, $sql))
{
    echo 'Data Inserted';
} else {
    echo 'error';
}
*/
?>  

php表单只是为了测试ajax是否正确发送数据。

当我单击按钮时，我总是收到未定义 php 变量的错误

我每次提交表单时遇到的错误

undefined index: frist_name in c:xampp\htdocs\unv\includes\widgets\insert.php on line 4
undefined index: last_name in c:xampp\htdocs\unv\includes\widgets\insert.php on line 5
undefined index: file in c:xampp\htdocs\unv\includes\widgets\insert.php on line 8
undefined index: file in c:xampp\htdocs\unv\includes\widgets\insert.php on line 9

我应该怎么做才能让ajax将数据发送到php页面？

Answer 1

由于选择器的创建方式，这将不起作用。

$(document).on('click', '#btn_add', function(){
var formData = new FormData($(this)[0]);

在上述场景中，$(this)[0] 为您提供button 的原始 HTML 解释。

您真正想要的是将您的按钮更改为submit 类型，捕获form submit event，然后处理您的请求。

button type="submit" <-- change

$(document).on('submit', '#insert_post', function(e){
    e.preventDefault(); //stop default form submission

    //do the rest of your stuff here
});

现在$(this)[0] 实际上是form 而不是button。