我的图像上传模式不是来自PHP

Question

我正在使用php，MySQL和Ajax创建一个Web应用程序，我想使用Bootstrap Modal上传单个图像。单击“选择”按钮后，模态不会出现。我认为我的代码几乎是正确的，但它不起作用。请帮我解决这个问题。提前致谢。以下是代码：

create_journal.php

    <div class="col-sm-6">
        <div align="Left" style="padding-right: 10px;">
            <button type="button" name="add" id="add" class="btn btn-success">Select</button>
            <br />
            <div id="image_data">

            </div>
        </div>
    </div>
    <div class="col-sm-3"></div>
<div id="imageModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Image</h4>
            </div>
            <div class="modal-body">
                <form id="image_form" method="post" enctype="multipart/form-data">
                    <p><label>Select Image</label>
                        <div class="upload-btn-wrapper">
                            <button class="btn2">Browse</button>
                            <input type="file" name="image" id="image" /></p><br />
                    </div>
                    <input type="hidden" name="action" id="action" value="insert" />
                    <input type="hidden" name="image_id" id="image_id" />
                    <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-info" />

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {

        fetch_data();

        function fetch_data() {
            var action = "fetch";
            $.ajax({
                url: "action.php",
                method: "POST",
                data: {
                    action: action
                },
                success: function(data) {
                    $('#image_data').html(data);
                }
            })
        }
        $('#add').click(function() {
            $('#imageModal').modal('show');
            $('#image_form')[0].reset();
            $('.modal-title').text("Add Image");
            $('#image_id').val('');
            $('#action').val('insert');
            $('#insert').val("Insert");
        });
        $('#image_form').submit(function(event) {
            event.preventDefault();
            var image_name = $('#image').val();
            if (image_name == '') {
                alert("Please Select Image");
                return false;
            } else {
                var extension = $('#image').val().split('.').pop().toLowerCase();
                if (jQuery.inArray(extension, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
                    alert("Invalid Image File");
                    $('#image').val('');
                    return false;
                } else {
                    $.ajax({
                        url: "action.php",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            alert(data);
                            fetch_data();
                            $('#image_form')[0].reset();
                            $('#imageModal').modal('hide');
                        }
                    });
                }
            }
        });
        $(document).on('click', '.update', function() {
            $('#image_id').val($(this).attr("id"));
            $('#action').val("update");
            $('.modal-title').text("Update Image");
            $('#insert').val("Update");
            $('#imageModal').modal("show");
        });
        $(document).on('click', '.delete', function() {
            var image_id = $(this).attr("id");
            var action = "delete";
            if (confirm("Are you sure you want to remove this image from database?")) {
                $.ajax({
                    url: "action.php",
                    method: "POST",
                    data: {
                        image_id: image_id,
                        action: action
                    },
                    success: function(data) {
                        alert(data);
                        fetch_data();
                    }
                })
            } else {
                return false;
            }
        });
    });
</script>

action.php的

<?php
//action.php
if (isset($_POST["action"]))
{
    $connect = mysqli_connect("localhost", "root", "", "testing");
    if ($_POST["action"] == "fetch")
    {
        $query = "SELECT * FROM tbl_images ORDER BY id DESC";
        $result = mysqli_query($connect, $query);
        $output = '
       <table class="table table-bordered table-striped">  
        <tr>
         <th width="10%">ID</th>
         <th width="70%">Image</th>
         <th width="10%">Change</th>
         <th width="10%">Remove</th>
        </tr>
      ';
        while ($row = mysqli_fetch_array($result))
        {
            $output .= '

        <tr>
         <td>' . $row["id"] . '</td>
         <td>
          <img src="data:image/jpeg;base64,' . base64_encode($row['name']) . '" height="60" width="75" class="img-thumbnail" />
         </td>
         <td><button type="button" name="update" class="btn btn-warning bt-xs update" id="' . $row["id"] . '">Change</button></td>
         <td><button type="button" name="delete" class="btn btn-danger bt-xs delete" id="' . $row["id"] . '">Remove</button></td>
        </tr>
       ';
        }
        $output .= '</table>';
        echo $output;
    }

    if ($_POST["action"] == "insert")
    {
        $file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));
        $query = "INSERT INTO tbl_images(name) VALUES ('$file')";
        if (mysqli_query($connect, $query))
        {
            echo 'Image Inserted into Database';
        }
    }
    if ($_POST["action"] == "update")
    {
        $file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));
        $query = "UPDATE tbl_images SET name = '$file' WHERE id = '" . $_POST["image_id"] . "'";
        if (mysqli_query($connect, $query))
        {
            echo 'Image Updated into Database';
        }
    }
    if ($_POST["action"] == "delete")
    {
        $query = "DELETE FROM tbl_images WHERE id = '" . $_POST["image_id"] . "'";
        if (mysqli_query($connect, $query))
        {
            echo 'Image Deleted from Database';
        }
    }
}
?>

Answer 1

您的代码工作正常，请检查控制台中是否有任何其他错误，如果模态不是打开方式，可能是其他js错误可能与模态js冲突。