如何在多个 Dropzone 上显示来自服务器的文件答案

【问题标题】：how to display files from server on multiple Dropzone如何在多个 Dropzone 上显示来自服务器的文件
【发布时间】：2019-07-11 09:29:45
【问题描述】：

我在一页中有两个放置区。第一个拖放区是显示图像，第二个拖放区是显示视频。图片和视频正在上传。但我想从服务器获取图像和视频并在 dropzone 中显示它们。问题是图像和视频都显示在一个拖放区中，即图像拖放区。我想在图像放置区显示通过服务器的图像，并在视频放置区显示通过服务器的视频。这是 HTML：

<form action="{{route('test.store')}}" method="post" class="dropzone" id="dropzoneImages" type="multipart/form-data">                                                           @csrf                                                       </form> 

<form action="{{route('test.store')}}" method="post" class="dropzone" id="dropzoneVideos" type="multipart/form-data">                                                           @csrf                                                       </form>

这是我的 JS：

var myDropzoneTheFirst = new Dropzone(

            '#dropzoneImages',{
            success: function (file, response) {
                console.log(response)
            },
            error: function (file, response) {
                return false;
            },
            init: function () {
                dropzone = this;
                Dropzone.autoDiscover = false;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/getImages',
                    type: 'post',
                    data: { request: 'fetch' },
                    dataType: 'json',
                    success: function (response) {

                        $.each(response, function (key, value) {
                            var mockFile = { name: value.name, size: value.size };
                            dropzone.emit("addedfile", mockFile);
                            dropzone.emit("thumbnail", mockFile, value.full_path);
                            dropzone.emit("complete", mockFile);

                        });

                    }
                });
            }
        });

    /* drop zone of Videos */
        var myDropzoneTheSecond = new Dropzone(

            '#dropzoneVideos',{
            success: function (file, response) {
                console.log(response)
            },
            error: function (file, response) {
                return false;
            },
            init: function () {
                dropzone = this;
                Dropzone.autoDiscover = false;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/getVideos',
                    type: 'post',
                    data: { request: 'fetch' },
                    dataType: 'json',
                    success: function (response) {

                        $.each(response, function (key, value) {
                            var mockFile = { name: value.name, size: value.size };
                            dropzone.emit("addedfile", mockFile);
                            dropzone.emit("thumbnail", mockFile, value.full_path);
                            dropzone.emit("complete", mockFile);

                        });

                    }
                });
            }
        });

任何帮助都会非常感激

【问题讨论】：

dropzone = this 很奇怪。请尝试在 init 中调用另一个函数。然后在该函数中，执行 ajax 请求并使用 myDropzoneTheFirst 或 myDropzoneTheSecond 作为 emit?
任何例子，如何做到这一点？？

标签： javascript jquery dropzone.js dropzone

【解决方案1】：

试试这个？基本上将ajax request移出init。对第二个 Dropzone 执行相同操作。

var myDropzoneTheFirst = new Dropzone(
    '#dropzoneImages',{
    success: function (file, response) {
        console.log(response)
    },
    error: function (file, response) {
        return false;
    },
    init: function () {
        Dropzone.autoDiscover = false;
    }
});

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: '/getImages',
    type: 'post',
    data: { request: 'fetch' },
    dataType: 'json',
    success: function (response) {

        $.each(response, function (key, value) {
            var mockFile = { name: value.name, size: value.size };
            myDropzoneTheFirst.emit("addedfile", mockFile);
            myDropzoneTheFirst.emit("thumbnail", mockFile, value.full_path);
            myDropzoneTheFirst.emit("complete", mockFile);

        });

    }
});

【讨论】：