Javascript 我的图片上传模式不是用php实现的

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

创建_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>

挑选


&时代；
添加图像
选择图像
浏览


接近
$（文档）.ready（函数（）{
获取_数据（）；
函数fetch_data（）{
var action=“fetch”；
$.ajax({
url:“action.php”，
方法：“张贴”，
数据：{
行动：行动
},
成功：功能（数据）{
$（'#image_data'）.html（数据）；
}
})
}
$（'#添加'）。单击（函数（）{
$（'#imageModal'）.modal（'show'）；
$（“#图像形式”）[0]。重置（）；
$（'.modal title'）.text（“添加图像”）；
$（'#image_id'）.val（''）；
$（'动作'）.val（'插入'）；
$（'插入'）.val（“插入”）；
});
$（“#图像_表单”）.submit（函数（事件）{
event.preventDefault（）；
var image_name=$（'#image'）.val（）；
如果（图像名称=“”）{
警报（“请选择图像”）；
返回false；
}否则{
变量扩展=$（'#image'）.val（）.split（'.'）.pop（）.toLowerCase（）；
if（jQuery.inArray（扩展名，['gif'，'png'，'jpg'，'jpeg']）=-1）{
警报（“无效图像文件”）；
$（'#image'）.val（''）；
返回false；
}否则{
$.ajax({
url:“action.php”，
方法：“张贴”，
数据：新表单数据（本），
contentType:false，
processData:false，
成功：功能（数据）{
警报（数据）；
获取_数据（）；
$（“#图像形式”）[0]。重置（）；
$（'#imageModal'）.modal（'hide'）；
}
});
}
}
});
$（文档）。在（'单击'，'更新'，函数（）上）{
$（'#image_id'）.val（$（this.attr（“id”））；
$（'行动'）.val（“更新”）；
$（'.modal title'）.text（“更新图像”）；
$（'插入'）.val（“更新”）；
$（'#imageModal'）.modal（“show”）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
var image_id=$（this.attr（“id”）；
var action=“删除”；
if（确认（“是否确实要从数据库中删除此图像？”）{
$.ajax({
url:“action.php”，
方法：“张贴”，
数据：{
图像标识：图像标识，
行动：行动
},
成功：功能（数据）{
警报（数据）；
获取_数据（）；
}
})
}否则{
返回false；
}
});
});

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';
        }
    }
}
?>

---

您的代码运行正常，请检查控制台中是否存在任何其他错误，如果modal未打开意味着，可能存在与modal js冲突的其他js错误。
我在此处找不到任何选择按钮。仅删除和更新。按原样使用代码，“选择”按钮工作正常：请逐行查看代码。。我已将选择按钮的id设置为“添加”@AmitKumarForms也有相同的功能id@CiroCorvino我已经编辑了我的代码，但模态还没有出现