Question

我在一页中有两个dropzone。一个放置区域用于显示图像，第二个放置区域用于显示视频。图片和视频正在上传。但是我想从服务器获取图像和视频，并在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);

                        });

                    }
                });
            }
        });

任何帮助都是非常重要的

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

        });

    }
});

如何在多个Dropzone上显示服务器中的文件

1 个答案: