Question

我有一个包含多个字段的现有HTML表单。我想使用Dropzone来增强表单文件输入（列出缩略图上传），但我不想使用任何内置文件上传功能的Dropzones。我只需要访问所选文件，并通过AJAX将其与我的其他表单数据一起发送到我的表单提交。

$(document).one('submit', '#account-group-add-form', function(e) {

    e.preventDefault();

    // Form validation.

    // Build an array of the form vars.
    var form_values = {};
    // I add all of the forms data to this structure then send via AJAX.

    // Send the data to the server.
    $.ajax({
        type: 'POST',
        url: sp23_ajax.ajaxurl,
        data: {
            'action': 'sp23_account_group_add',
            'data': JSON.stringify(form_values)
        },
        success: function(data) {

            // Success.

        }
    });

});

Answer 1

我最近需要一个解决方案，让用户只能添加一个文件，并以单一形式发送此文件。此表单应通过 AJAX 调用发送。以下是我的解决方案：

以编程方式创建放置区
将属性“autoProcessQueue”设置为false
在init选项中，创建2个事件监听器（addedfile和removedfile）
创建一个全局变量（附件）。此变量将从 dropzone 接收文件

在事件侦听器中，根据您的需要创建编程逻辑（以下是我的示例）

$('#myAttachmentField').dropzone({
url: 'ajax.php',
autoProcessQueue: false,
init: function() {
    let files = 0
    this.on("addedfile", function(file) {
        files++
        if (attachment == undefined && files === 1) attachment = file
    })
    this.on('removedfile', function(file) {
        files--
        if (files === 0) attachment = undefined
    })
}

})

现在您可以使用“附件”变量访问文件在发送 ajax 请求之前，我做这个验证：

var formData = new FormData()
formData.append('another_field', data)
if (attachment != undefined) formData.append('attachment', attachment)
$.ajax({
        url: 'ajax',
        type: 'POST',
        data: formData,
        dataType: 'JSON',
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        error: function () {
            noty({type: 'error', timeout: 2500, text: 'Erro ao salvar dados. Se o problema persistir, contate o administrador.'})
        },
        success: function(e) {
            if (e.success == false) {
                noty({type: 'error', timeout: 2500, text: 'Erro ao salvar dados. Se o problema persistir, contate o administrador.<br>' + e.message})
                return
            }
            noty({type: 'success', timeout: 2500, text: 'Novo dado salvo com sucesso.'})

        }
    })

在表单提交上使用我自己的AJAX发送Dropzone文件。

1 个答案: