使用Dropzone.js时无法通过Ajax传递图片ID的问题求助

我明白你现在的困扰：用Dropzone上传图片到数据库没问题，移除按钮也能触发，但就是没法把对应的图片ID传给后端去删除。别担心，咱们一步步来搞定这个事儿。

核心思路 #

要解决这个问题，关键是把上传成功后后端返回的图片ID和Dropzone里的文件对象绑定起来，然后在点击移除按钮时，从文件对象里取出这个ID再发Ajax请求到后端删除接口。

具体代码修改 #

给你的Dropzone配置加上两个关键回调：success（存ID）和removedfile（用ID删图）：

Dropzone.autoDiscover = false;
var base_url = "<?php echo base_url();?>";

$("div#dropzone").dropzone({
    url: base_url + 'cars/addpic',
    addRemoveLinks: true,
    uploadMultiple: true,
    paramName: "files",
    acceptedFiles: "image/*",
    dictDefaultMessage: "<span class='mif-file-upload ...", // 保留你原有文案
    // 上传成功后，绑定图片ID到文件对象
    success: function(file, response) {
        // 假设后端返回JSON格式，比如 {"id": 123}
        var res = JSON.parse(response);
        // 给当前文件对象添加自定义属性存储图片ID
        file.imgId = res.id;
    },
    // 移除文件时触发的事件
    removedfile: function(file) {
        // 先判断是否已绑定图片ID（避免未上传完成就点击移除的情况）
        if (file.imgId) {
            // 发送Ajax请求到后端删除接口
            $.ajax({
                url: base_url + 'cars/deletepic',
                type: 'POST',
                data: { id: file.imgId },
                success: function() {
                    // 后端删除成功后，再移除Dropzone中的预览DOM
                    file.previewElement.remove();
                },
                error: function() {
                    alert('删除图片失败，请重试');
                }
            });
        } else {
            // 未上传完成的文件，直接移除预览DOM
            file.previewElement.remove();
        }
    }
});

后端配合（CodeIgniter示例） #

你的cars/deletepic接口需要接收id参数，完成数据库记录删除（记得同步删除服务器上的图片文件）：

public function deletepic() {
    $img_id = $this->input->post('id');
    // 1. 从数据库删除对应图片记录
    $this->db->where('id', $img_id)->delete('car_images');
    // 2. （可选）删除服务器上的物理图片文件
    $img_info = $this->db->where('id', $img_id)->get('car_images')->row();
    if ($img_info) {
        unlink(FCPATH . 'uploads/' . $img_info->filename);
    }
    echo json_encode(['status' => 'success']);
}

注意事项 #

• 确保后端addpic接口返回包含图片ID的JSON数据，比如上传成功后返回json_encode(['id' => $insert_id])；
• 如果uploadMultiple设为true，上传成功时response可能是多个ID的数组，需要对应修改success回调逻辑，给每个文件绑定对应ID；
• 记得处理Ajax请求的错误场景，给用户明确反馈。

这样修改后，点击移除按钮时就能正确把图片ID传给后端，完成数据库和文件的删除啦！

内容的提问来源于stack exchange，提问作者Javid Abbasov