CodeIgniter3中Dropzone表单无法同步提交普通图片字段问题求助

问题原因 #

当设置autoProcessQueue: false并手动触发processQueue()时，Dropzone仅会将自身队列中的文件打包到FormData中提交，不会自动包含表单内的其他<input type="file">字段（如owner_picture），导致后端无法接收该字段数据。

解决方案 #

1. 修改Dropzone JS配置，追加普通文件到提交请求 #

在Dropzone的sendingmultiple事件中，手动将owner_picture文件添加到Dropzone的FormData对象里：

this.on("sendingmultiple", function(files, xhr, formData) {
    // 获取owner_picture的文件对象
    const ownerPicInput = document.querySelector('input[name="owner_picture"]');
    if (ownerPicInput.files.length > 0) {
        // 将普通文件追加到提交的FormData中
        formData.append('owner_picture', ownerPicInput.files[0]);
    }
});

2. 调整提交按钮的事件逻辑 #

原代码仅在Dropzone有文件时阻止表单默认提交，需补充表单验证逻辑，并确保两种场景（有无Dropzone文件）都能正确提交所有字段：

this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
    // 先执行表单验证
    if (!validate()) {
        e.preventDefault();
        return;
    }

    // 若Dropzone有文件，阻止默认提交，交由Dropzone处理队列
    if (myDropzone.files.length > 0) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
    }
    // 若无Dropzone文件，表单将正常提交，owner_picture会被自动包含
});

3. 后端CodeIgniter处理逻辑（补充） #

确保add_project方法同时处理单文件（owner_picture）和多文件（Dropzone附件）：

// 处理owner_picture单文件上传
if (!empty($_FILES['owner_picture']['name'])) {
    $config['upload_path'] = './uploaded_files/owner/';
    $config['allowed_types'] = 'gif|jpg|png|jpeg';
    $this->load->library('upload', $config);
    
    if ($this->upload->do_upload('owner_picture')) {
        $ownerPicData = $this->upload->data();
        // 此处添加将owner_picture信息保存到数据库的逻辑
    } else {
        // 处理上传错误，比如返回错误提示
    }
}

// 处理Dropzone多文件上传
if (!empty($_FILES['file']['name'])) {
    $config['upload_path'] = './uploaded_files/project/';
    $config['allowed_types'] = 'gif|jpg|png|jpeg|doc|docx|xls|xlsx|pdf|ppt|pptx';
    $this->load->library('upload', $config);
    
    // 循环处理多文件
    foreach ($_FILES['file']['name'] as $key => $name) {
        $_FILES['single_file']['name'] = $_FILES['file']['name'][$key];
        $_FILES['single_file']['tmp_name'] = $_FILES['file']['tmp_name'][$key];
        $_FILES['single_file']['size'] = $_FILES['file']['size'][$key];
        $_FILES['single_file']['error'] = $_FILES['file']['error'][$key];
        $_FILES['single_file']['type'] = $_FILES['file']['type'][$key];
        
        if ($this->upload->do_upload('single_file')) {
            $fileData = $this->upload->data();
            // 此处添加将附件信息保存到数据库的逻辑
        } else {
            // 处理单文件上传错误
        }
    }
}

完整修改后的Dropzone JS代码 #

Dropzone.options.proForm2 = {
    accept: function(file, done) {
        var allowed_expensions = ["gif", "jpg", "png", "jpeg", "doc", "docx", "xls", "xlsx", "pdf", "ppt", "pptx"];
        var filename = file.name;
        var file_type = filename.split('.').pop().toLowerCase();
        
        if (allowed_expensions.indexOf(file_type) > -1) {
            done();
        } else {
            done("Error! Files of this type are not accepted");
        }
    },
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    addRemoveLinks: true,
    dictRemoveFile: '',
    dictCancelUpload: '',
    previewsContainer: '.dropzone-previews2',
    init: function() {
        var myDropzone = this;
        
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
            // 先执行表单验证
            if (!validate()) {
                e.preventDefault();
                return;
            }

            if (myDropzone.files.length > 0) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            }
        });

        this.on("sendingmultiple", function(files, xhr, formData) {
            // 添加owner_picture到提交的FormData
            const ownerPicInput = document.querySelector('input[name="owner_picture"]');
            if (ownerPicInput.files.length > 0) {
                formData.append('owner_picture', ownerPicInput.files[0]);
            }
        });

        this.on("successmultiple", function(files, response) {
            window.location = '<?php echo base_url(); ?>project/go_to_step2<?php if (isset($proj_id) && $proj_id != null) {echo "/$proj_id";} ?>';
        });

        this.on("errormultiple", function(files, response) {
            alert('error');
            console.log(response);
        });
    }
}

关键说明 #

• 必须保证表单存在enctype="multipart/form-data"属性（你的代码已包含）
• Dropzone手动处理队列时不会自动携带其他文件字段，需通过formData.append()手动添加
• 后端需分别处理单文件和多文件的上传逻辑

内容的提问来源于stack exchange，提问作者Mujtaba Hussain