javascript - php & mysql 和 ajax(将图像插入 CRUD 应用程序)

Question

我需要在此处添加图像字段，但我不知道如何做到这一点，我添加了一些文本字段，但我无法添加图像`

<div class="form-group">
   <label for="address">Thired step</label>
   <input type="text" id="address" placeholder="Thired step" class="form-control"/>
</div>

<div class="form-group">
    <!--<form method="POST" action="store_image.php" enctype="multipart/form-data"> -->
    <input type="file" name="imagee" id="imagee  class="form-control"/>
    <!--<input type="submit" name="submit_image" value="Upload"> -->

</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary" onclick="addRecord()" enctype="multipart/form-data">Add Help</button>
</div>`

这是addRecord.php`

<?php
    if(isset($_POST['first_name']))
    {
        // include Database connection file 
        include("db_connection.php");

        // get values 
        $first_name = $_POST['first_name'];
        $last_name = $_POST['last_name'];
        $email = $_POST['email'];
        $address=$_POST['address'];
        $image=$_FILES['imagee']['name'];


        $query = "INSERT INTO users(first_name, last_name, email, address, image) VALUES('$first_name', '$last_name', '$email','$address','$image')";
        if (!$result = mysql_query($query)) {
            exit(mysql_error());
        }
        echo "1 Record Added!";
        $target="images/".basename($_FILES['imagee']['name']);
    if(move_uploaded_file($_FILES['imagee']['tmp_name'],$target)){

        $msg="Image uploaded";
    }else{
        $msg="not uploaded";
    }
    }
?>`

这是 script.js 文件`

// Add Record
function addRecord() {
    // get values
    var first_name = $("#first_name").val();
    var last_name = $("#last_name").val();
    var email = $("#email").val();
    var address=$("#address").val();
    var imagee  =$("#imagee").val();

    //$address=$_POST['address'];
    //$image=$_FILES['imagee']['name'];



    // Add record
    $.post("ajax/addRecord.php", {
        first_name: first_name,
        last_name: last_name,
        email: email,
        address:address,
        imagee:imagee
    }, function (data, status) {
        // close the popup
        $("#add_new_record_modal").modal("hide");

        // read records again
        readRecords();

        // clear fields from the popup
        $("#first_name").val("");
        $("#last_name").val("");
        $("#email").val("");
        $("#address").val("");
        $("#imagee").val("");

    });
}

我将所有文件包含在我的项目中，请向我发送添加图像并完成该项目需要进行哪些更改。

`

Answer 1

我真的不知道你想在这里完成什么。同时取消注释您的表单标记

<form method="POST" id="image_uploader" enctype="multipart/form-data">

试试这个

var formData = new FormData($('#image_uploader')[0]); // This would dynamically grab all contents from your form including images and files.

然后，替换为，

    $.ajax({
        type: "POST",
        url: "ajax/addRecord.php",
        data: formData,
        //use contentType, processData for sure.
        contentType: false,
        processData: false,
        beforeSend: function() {
            //you can add a loading icon or loading message to tell your users something is happening
        },
        success: function(msg) {
            //hide modal on success and load
// close the popup
        $("#add_new_record_modal").modal("hide");

        // read records again
        readRecords();
        },
        error: function() {
           //show error message
        }
    });