無法將 dropzone.js 實施到現有表單

Question

我正在嘗試將 dropzone.js 實現到我現有的表單中，該表單有很多輸入字段、select 選項等。我試圖遵循這個答案： 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())


})

我認為這個初始化 function 毀了它，因為如果我刪除它，按鈕工作正常，但數據不會 go 到數據庫

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

我必須在接受 function 中添加“完成”：

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