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);

并确保此网址action="<?php echo URL.'Events/addeventdetails'?>"是正确的！

使用div通过ajax将文件（多个图像）传递到控制器的Dropzone无法正常工作

1 个答案: