Как получить Dropzone. js в сочетании с несколькими входными и выбрать рабочие поля

Question

Я пытаюсь получить dropzone. js, работающий с несколькими вводами и работающими с выбранными полями.

Также читая dropzone. js документации я видел, что форма dropzone выглядит как автономная форма. Поэтому, когда я попытался добавить дополнительные поля ввода и выбора внутри формы dropzone, вся форма покрывается dropzone, и я хотел, чтобы только одна часть была dropzone. Также я нашел способ исправить это, читая другие статьи stackoverflow.

Я создал форму с 3 полями ввода , 7, выберите параметры и + * 1011. * 1 dropzone , и у меня есть 1 кнопка отправки, которая должна отправить все это вместе.

Я следил за этой статьей stackoverflow: Интеграция Dropzone. js в существующую HTML форму с другими полями

Проблема: Когда я отправляю форму файл начинает загрузку (анимация прогресса показывает это), но файл не загружается на сервер, а форма не полностью передается, а также значения полей не отправляются в базу данных.

Это код начала формы:

<form  id="drform" name="formapdf2" method="post" action="dodaj-save.php" autocomplete="off" enctype="multipart/form-data">

Это код кнопки отправки:

<button id="sbmtbutton" class="btn btn-primary" name="insert" type="submit">Registruj radnika</button>

Вот код JS, который я использую:

Dropzone.options.dropfile = {
    acceptedFiles: 'image/*',
    maxFiles: 1,
    resizeWidth: 300,
    resizeHeight: 300,
    resizeMethod: 'contain',
    resizeQuality: 1.0,
    maxFilesize: 4,
    autoProcessQueue: false,
    url: 'dodaj-save.php',
    addRemoveLinks: true,
    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("sbmtbutton").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) {
            formData.append("name", jQuery("#dzfname").val());
            formData.append("qrcode", jQuery("#dzfqrcode").val());
            formData.append("company", jQuery("#select_id").val());
            formData.append("money", jQuery("#dzfmoney").val());
            formData.append("checkin", jQuery("#dzfcheckin").val());
            formData.append("checkout", jQuery("#dzfcheckout").val());
            formData.append("checkin1", jQuery("#dzfcheckin1").val());
            formData.append("checkout1", jQuery("#dzfcheckout1").val());
            formData.append("checkin2", jQuery("#dzfcheckin2").val());
            formData.append("checkout2", jQuery("#dzfcheckout2").val());
        });
    }
}

I У меня тоже есть код PHP для загрузки, но я не уверен, что проблема в коде php, и я должен показать этот код тоже здесь. Если вам нужно что-то еще, чтобы определить, в чем проблема, пожалуйста, дайте мне знать. И я надеюсь, что не нарушил ни одного правила stackoverflow, так как это мой первый пост.

Answer 1

Попробуй это. Это немного отличается от того, как вы это делаете, но работает очень хорошо.

Первое, что вы можете сделать, это остановить Dropzone. js от автоматического определения тегов формы путем добавления этого вне вашего $(document).ready(function(){}):

Dropzone.autoDiscover = false;

Затем создайте экземпляр Dropzone с функцией AJAX. Сделайте это внутри из $(document).ready(function(){}), но вне события нажатия кнопки :

let myDropzone = new Dropzone('.dropzone', { //Give your input (or form if you're not sending anything else) a class of dropzone
    autoProcessQueue: false,
    acceptedFiles: ".svg", // Add accepted file types here
    url: "dodaj-save.php", // Your PHP file here
    init: function() {
        this.on("addedfile", function() {
            //Do something before the file gets processed.
        })
        this.on("sending", function(file, xhr, formData){
            //Do something when the file gets processed.
            //This is a good time to append additional information to the formData. It's where I add tags to make the image searchable.
            formData.append('tags', 'cat-cats-kittens-meow')
        }),
        this.on("success", function(file, xhr) {
            //Do something after the file has been successfully processed e.g. remove classes and make things go back to normal. 
        }),
        this.on("complete", function() {
            //Do something after the file has been both successfully or unsuccessfully processed.
            //This is where I remove all attached files from the input, otherwise they get processed again next time if you havent refreshed the page.
            myDropzone.removeAllFiles();   
        }),
        this.on("error", function(file, errorMessage, xhr) {
            //Do something if there is an error.
            //This is where I like to alert to the user what the error was and reload the page after. 
            alert(errorMessage);
            window.location.reload();
        })
    }
});

Затем l oop через все вложенные файлы и обработайте все они последовательно при нажатии кнопки отправки:

const uploadBtn = document.querySelector('#sbmtbutton');
uploadBtn.addEventListener('click', () => {
    const acceptedFiles = myDropzone.getAcceptedFiles();
    for (let i = 0; i < acceptedFiles.length; i++) {
        myDropzone.processFile(acceptedFiles[i])
    }
})

Это все со стороны Javascript. В вашем файле PHP вы можете обработать файлы и переместить их в папку на сервере:

<?php

    $folder_name = 'path-to-your-folder/';

    if (!empty($_FILES)) {
        $temp_file = $_FILES['file']['tmp_name'];
        $filename = $_POST['tags'].'.svg'; //Grabbing those tags that I appended to formData in the AJAX request and renaming the file based on those tags. Be sure to add your image extension
        $location = $folder_name.$filename;
        move_uploaded_file($temp_file, $location);
    }

?>

Надеюсь, это поможет! =) Также важно отметить, что вам придется запускать это на локальном сервере, если вы хотите, чтобы PHP запускался при тестировании этого на вашем локальном компьютере. Вы можете настроить локальный сервер, следуя этим инструкциям.

Вы можете использовать PHP и JS, чтобы вернуть изображения с сервера и отобразить их на стороне клиента, но это может быть за рамками этого вопроса. Если вы хотите, чтобы я добавил его, просто упомяните об этом в комментарии, и я добавлю его в качестве обновления к ответу.