Dropzone с использованием передачи файлов Div (несколько изображений) в контроллер через AJAX не работает

Question

Я пытаюсь создать dropzone в div с классом dropzone, я получаю dropone и могу загружать изображения на него, но не могу передать его на контроллер, но данные не передаются через jquery на cotroller .... удаление файлов, всеостальное работает нормально ... но я не могу получить загруженные файлы, может кто-нибудь сказать, в чем проблема, я хотел вставить несколько изображений,

Это div:

 <div class="col-md-12" style="margin-bottom: 48px; bottom: -50px; border-color:white   ">
                <div class="dropzone" id="mydropzone" action="<?php echo URL.'Events/addeventdetails'?>" >
                     <h1 align="center"><i> Drag or Drop Image Here</i></h1>
                 </div>
             </div>

Jquery:

<script type="text/javascript">

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('div#mydropzone', {
    addRemoveLinks: true,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 15,
    paramName: 'file',
    clickable: true,
    url: '<?php echo URL . 'Events/addeventdetails' ?>',
    init: function () {

        var myDropzone = this;
        // Update selector to match your button
        $btn.click(function (e) {
            e.preventDefault();
            if ( $form.valid() ) {
                myDropzone.processQueue();
            }
            return false;
        });

        this.on('sending', function (file, xhr, formData) {
            // Append all form inputs to the formData Dropzone will POST
            var data = $form.serializeArray();
            $.each(data, function (key, el) {
                formData.append(el.name, el.value);
            });
            console.log(formData);

        });
    },
    error: function (file, response){
        if ($.type(response) === "string")
            var message = response; //dropzone sends it's own error messages in string
        else
            var message = response.message;
        file.previewElement.classList.add("dz-error");
        _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i];
            _results.push(node.textContent = message);
        }
        return _results;
    },
    successmultiple: function (file, response) {
        console.log(file, response);
        $modal.modal("show");
    },
    completemultiple: function (file, response) {
        console.log(file, response, "completemultiple");
        //$modal.modal("show");
    },
    reset: function () {
        console.log("resetFiles");
        this.removeAllFiles(true);
    }
});
</script>

Контроллер:

    $uploaddir = './uploads';

$images = $_FILES;


$data = [];

foreach ($images as $key => $image) {
    $name = $image['name'];
    $uploadfile = $uploaddir . basename($name);
    if (move_uploaded_file($image['tmp_name'], $uploadfile)) {
        $data[$key]['success'] = true;
        $data[$key]['src'] = $name;

    } else {
        $data[$key]['success'] = false;
        $data[$key]['src'] = $name;
    }
}  
 $this->Common_model->form_insertpic('images'); 

Answer 1

Я вижу, что вы объявили var myDropzone дважды.Это может быть проблемой.Проверьте, действительно ли вызов ajax запущен после загрузки изображения.Var_dump ($ _ FILES) в вашем контроллере, чтобы увидеть, что там.

Я сделал это таким образом.Попробуйте это так:

let myDropzone= $("#mydropzone");

const myDropzoneImage = {
    paramName: "file", // name used to transfer the file //
    maxFiles: 50,
    maxFilesize: 5,
    resizeWidth: 350,
    resizeHeight: 258,
    thumbnailWidth: 350,
    thumbnailHeight: 258,
    addRemoveLinks: true,
    dictResponseError: "Server not Configured",
    acceptedFiles: ".png,.jpg,.jpeg",
    //previewsContainer: "#your preview container",

    init: function() {
        let self = this;
        let prevImage = "";

        self.options.dictRemoveFile = "Delete";
        //New file added
        self.on("addedfile", function(file) {
            //console.log("new file added ", file);
        });
        // On removing file
        self.on("removedfile", function(file) {
            // put your ajax call for remove
        });

        self.on("success", function(file, responseText) {
            prevFile = responseText.img_id;
        });

        self.on("error", function(file){
            // console.log("File Failed to Upload");
        });

        //Check image width and height
        self.on("thumbnail", function(file) {
            if (file.width > maxImageWidth || file.height > maxImageHeight) {
                file.rejectDimensions()
            }
            else {
                file.acceptDimensions();
            }
        });

    },
    accept: function(file, done) {
        file.acceptDimensions = done;
        file.rejectDimensions = function() { 
            done("Image width or height too big."); };
        }
    }
}

myDropzone.dropzone(myDropzoneImage);

И убедитесь, что этот URL action="<?php echo URL.'Events/addeventdetails'?>" правильный!