无法将 dropzone.js 实施到现有表单

Question

我正在尝试将 dropzone.js 实现到我现有的表单中，该表单有很多输入字段、选择选项等。我试图遵循这个答案：https://stackoverflow.com/a/35275260/13695248 但我得到的只是如果我按下发送按钮，实际上没有任何反应。没有错误或任何东西，它只是不做任何事情。我从@Swati 那里得到了很多帮助，所以我在 dropzone 选项中有一些额外的功能，但我认为这不会导致问题。 这是 html 的样子：

<form action="upload.php" method="post" enctype='multipart/form-data' id="add">
<div class="dropzone" id="uploader"></div>
<input type="text" id="mainimage" name="mainimage">
<!-- lot of input fields here -->
<input type="submit" class="btn btn-primary btn-xl" id="sendButton" name="upload" value="Send" />
</form>

还有JS部分：

Dropzone.options.uploader = {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    paramName: "images", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    maxFiles: 5,
    addRemoveLinks: true,
    acceptedFiles: 'image/*',
    accept: function(file) {
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onloadend = function() {
            $('<a>', {
                class: 'primary',
                text: "Legyen ez a fő kép",
                href: "#"
            }).appendTo(file.previewElement)
            //file.previewElement.append($textContainer)
            console.log(file.previewElement)
            file.previewElement.classList.add("dz-success");
            if (($(".dz-success.dz-complete").length > 0) && ($(".main").length == 0)) {
                $(".dz-success.dz-complete:first .primary").text("Fő kép")
                //add class to first one
                $(".dz-success.dz-complete:first").addClass("main")
                $("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input
            }


        }

        file.previewElement.classList.add("dz-complete");

    },
    "error": function(file, message, xhr) {
        if (xhr == null) this.removeFile(file);
        alert(message);
    },
    removedfile: function(file) {
        var is_there = file.previewElement.classList.contains("main");
        console.log(is_there)
        file.previewElement.remove();

        if (is_there && $(".dz-success.dz-complete").length > 0) {
            $(".dz-success.dz-complete .primary").text("Legyen ez a fő kép")
            $(".dz-success.dz-complete:first .primary").text("Fő kép")
            $(".dz-success.dz-complete:first").addClass("main")
            $("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input


        }


        if ($(".dz-success.dz-complete").length == 0) {

            $("#mainimage").val("")
        }

    },
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("sendButton").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            $(":input[name]", $("form")).each(function() {
                formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val());
            });
        });
    },
    dictDefaultMessage: 'Kérjük húzza ide a képeket vagy kattintson a tallózáshoz!',
    dictFallbackMessage: 'Böngészője nem támogatja a kép előnézetet!',
    dictFallbackText: 'Kérjük használja a tallózást a képek kiválasztásához!',
    dictFileTooBig: 'A fájl mérete túl nagy. ({{filesize}}MiB). Maximum {{maxFilesize}}MiB lehet!',
    dictInvalidFileType: 'A kiválasztott fájl kiterjesztése nem megfelelő!',
    dictResponseError: 'A szerver {{statusCode}} kóddal válaszolt. Kérjük próbálja meg később!',
    dictCancelUpload: 'Feltöltés visszavonása',
    dictUploadCanceled: 'feltöltés visszavonva!',
    dictCancelUploadConfirmation: 'Biztosan visszavonja a feltöltést?',
    dictRemoveFile: 'Kép törlése',
    dictMaxFilesExceeded: 'Elérte a maximálisan feltölthető képek számát!'

};

$(document).on("click", ".primary", function() {
    $(".dz-success.dz-complete.main .primary").text("Legyen ez a fő kép")
    $(this).text("Fő kép")
    $(".dz-success.dz-complete").removeClass("main")
    $(this).closest(".dz-success.dz-complete").addClass("main")
    $("#mainimage").val($(this).closest(".dz-success.dz-complete").find(".dz-filename span").text())


})

我认为这个初始化函数毁了它，因为如果我删除它，按钮可以正常工作，但数据不会进入数据库

init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("sendButton").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            $(":input[name]", $("form")).each(function() {
                formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val());
            });
        });
    }

Answer 1

我必须在接受函数中添加“完成”：

accept: function(file, done) {
.
.
 done();
}