多个 dropzone 仅导致第一个添加的 dropzone 拾取添加到第二个 dropzone 的文件

Question

这就是我启动它们的方式：

var myDropzone = new Dropzone("#galleryUploadDropzone", Dropzone.options.myAwesomeDropzone)

var myDropzone = new Dropzone("#galleryUploadDropzone2", Dropzone.options.myAwesomeDropzone2)

Dropzone.options.myAwesomeDropzone 和 Dropzone.options.myAwesomeDropzone2 用于启动它们。

两个 dropzone 都正确启动，没有错误，但是当我在第二个 dropzone 上传内容时，它会显示在第一个 dropzone 而不是第二个。

这是选项对象的外观：

Dropzone.options.myAwesomeDropzone = {

    // Dropzone configuration
    autoProcessQueue: true,
    addRemoveLinks: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 20,
    previewsContainer: '#dropzone-previews',
    // clickable:'#dropzone-previews',
    acceptedFiles: ".jpeg,.jpg,.png,.gif,.bmp",
    maxFilesize: 2,

    // The setting up of the dropzone
    init: function() {
        myDropzone = this;

        myDropzone.on("addedfile", function(file) {
            $( '#uploadMsg' ).hide();
        });

        myDropzone.on("maxfilesexceeded", function(file) {
            $( '#uploadMsg' ).append('<h4>Max amount of files exceeded. Only '+maxFiles+' files can be uploaded at once.</h4>');
        });


        // First change the button to actually tell Dropzone to process the queue.
        $("#sbmtbtn").on('click',function(e) {
          // Make sure that the form isn't actually being sent.
              e.preventDefault();
              e.stopPropagation();
              myDropzone.processQueue();
        });

        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
        // of the sending event because uploadMultiple is set to true.
        this.on("sendingmultiple", function() {
          // Gets triggered when the form is actually being sent.
          // Hide the success button or the complete form.
          console.log('sendingmultiple')
        });
        this.on("successmultiple", function(files, response) {
            console.log('successmultiple')
          // Gets triggered when the files have successfully been sent.
          // Redirect user or notify of success.
          setTimeout(removeFiles, 500)
          console.log('removeFiles should be called soon')
          freshLibraryImages = response.images
        });
        this.on("errormultiple", function(files, response) {
          // alert('error');
          // Gets triggered when there was an error sending the files.
          // Maybe show form again, and notify user of error
        });
    }
}

第二个

Dropzone.options.myAwesomeDropzone2 = {
    // Dropzone configuration
    autoProcessQueue: true,
    addRemoveLinks: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 20,
    previewsContainer: '#dropzone-previews',
    // clickable:'#dropzone-previews',
    acceptedFiles: ".jpeg,.jpg,.png,.gif,.bmp",
    maxFilesize: 2,

    // The setting up of the dropzone
    init: function() {
        myDropzone2 = this;

        myDropzone2.on("addedfile", function(file) {
            $( '#uploadMsg' ).hide();
        });

        myDropzone2.on("maxfilesexceeded", function(file) {
            $( '#uploadMsg' ).append('<h4>Max amount of files exceeded. Only '+maxFiles+' files can be uploaded at once.</h4>');
        });


        // First change the button to actually tell Dropzone to process the queue.
        $("#sbmtbtn").on('click',function(e) {
          // Make sure that the form isn't actually being sent.
              e.preventDefault();
              e.stopPropagation();
              myDropzone2.processQueue();
        });

        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
        // of the sending event because uploadMultiple is set to true.
        this.on("sendingmultiple", function() {
          // Gets triggered when the form is actually being sent.
          // Hide the success button or the complete form.
          console.log('sendingmultiple')
        });
        this.on("successmultiple", function(files, response) {
            console.log('successmultiple')
          // Gets triggered when the files have successfully been sent.
          // Redirect user or notify of success.
          setTimeout(removeFiles, 500)
          console.log('removeFiles should be called soon')
          freshLibraryImages = response.images
        });
        this.on("errormultiple", function(files, response) {
          // alert('error');
          // Gets triggered when there was an error sending the files.
          // Maybe show form again, and notify user of error
        });
    }

我在这里做错了什么？

Answer 1

将第二个拖放区实例化为不同的变量

var myDropzoneA = new ...
var myDropzoneB = new ...

这样称呼他们