多個懸浮窗會導致只有第一個加入懸浮窗回暖加入到第二懸浮窗

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

，並把它們稱作這種