Làm cách nào để kích hoạt tải lên tệp tải lên mặc định của Dropzone.js?

Question

Tôi muốn biết cách kích hoạt đầu vào tải lên tệp mặc định của Dropzone.js? Nó không đơn giản như thế này:

window.dropCloud = = new Dropzone("#dropCloud", {...}); 
$(window.dropCloud.clickableElements[0]).trigger("click"); 

Bây giờ tôi không có bất kỳ ý tưởng nào. Dù sao, toàn bộ vùng chứa #dropCloud bị ẩn, nếu nó quan trọng.

Answer 1

Sigh ... Tôi nghĩ rằng nó là giải pháp xấu nhất mà tôi đã thực hiện ... Trong khi init fn đang chạy.

this.clickableElements.push($("#anotherUploadBtn")[0]); 
this.clickableElements.forEach(function(y){ .... 

Bạn có ý tưởng nào tốt hơn không?

Answer 2

Tôi đã có cùng một vấn đề và sau một thời gian khá cố gắng, cuối cùng tôi đã tìm thấy cách thêm các khu vực có thể nhấp bổ sung vào biểu mẫu tải lên DropZone hiện có.

Lưu ý: Phải có ít nhất một khu vực có thể nhấp "ban đầu" được đính kèm ban đầu theo thông số clickable.

var DZ = Dropzone.forElement('.dropzone'); // Change selector to yours 
var new_clickable = $('.new-clickable')[0]; // Change selector to yours 
var new_listener = jQuery.extend({}, DZ.listeners[DZ.listeners.length - 1]); 
new_listener.element = new_clickable; 
DZ.clickableElements.push(new_clickable); 
DZ.listeners.push(new_listener); 
DZ.disable(); 
DZ.enable(); 

Về cơ bản những gì tôi làm là

1. Thêm nhấp được phần tử DOM mới để DZ.clickableElements.
2. Sao chép đối tượng mảng DZ.listeners mới nhất.
3. Thay thế element thuộc tính trong new_listener đối tượng với chúng tôi.
4. Thêm cả hai new_clickable và new_listener quay lại DZ.
5. Gọi DZ.disable() và DZ.enable() làm lại tất cả các trình xử lý sự kiện.

Answer 3

Điều này dường như làm việc tuyệt vời cho tôi

var dropZone = new Dropzone($("#yourdropzonedivthinger").get(0), { 
BLAH BLAH BLAH drop zone init stuff 
}); 

//Call this anywhere in your code to manually trigger the dropzone file dialog popup thinger 

dropZone.hiddenFileInput.click(); 

Answer 4

đơn giản. Trong phiên bản 4.0 bạn có thể làm:.

new Dropzone(".element", { 
    clickable: '.myTrigger' 
}); 

new Dropzone(".element", { 
    clickable: ['.myTrigger', '.myOtherTrigger'] 
}); 

Answer 5

jQuery("#file-uploader").dropzone({ 
     url: "/upload/", 
     paramName: "file", 
     maxFilesize: 5, 
     acceptedFiles: 'image/*,.jpeg,.jpg', 
     autoProcessQueue: true, 
     clickable: ['#file-uploader *','#file-uploader'], 
     init: function() { 
      this.hiddenFileInput.click(); //opens the file select dialogue 
     }, 
     accept: function(file, done) { 
      // some code 
      done(); 
     }, 
     success: function (file, responseText) 
     { 
      var responseJSON = JSON.parse(responseText); 

      // some code 
     }, 

});