多个悬浮窗会导致只有第一个加入悬浮窗回暖加入到第二悬浮窗

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 ... 

，并把它们称作这种