dropzone.js - 将 maxfiles 动态添加到 dropzone

Question

我在 Laravel 中使用 dropzone 我需要在单击按钮时添加最大数量的照片，但它没有获取变量的值，但是当我更改并输入数字时效果很好。

('#add').on("click", function(e){
  e.preventDefault();
  var max_photos = $("#num_photos").val();
  max_photos = 5 - max_photos;
  $( "#add-photos" ).fadeIn();
});

Dropzone.autoDiscover = false;
var myDropzone2 =  new Dropzone("div#add-photos-edit", {      
      url: "../../update/store2", 
      autoProcessQueue:false,
      parallelUploads: 100,
      uploadMultiple: true,
      maxFilesize:5,
      maxFiles: max_photos,
      acceptedFiles: ".jpeg,.jpg,.png,.gif",
      headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      init: function() {
          myDropzone2 = this; // closure
          var btn = document.querySelector("#submit");         
          btn.addEventListener("click", function(e) {
              e.preventDefault();
              e.stopPropagation();

          });
          this.on("sending", function(file, xhr, data) {
          });

          this.on("success", function(file, xhr){
            alert(file.xhr.response);

          })
      }

});


$("#submit").click( function(e){
      e.preventDefault();
      myDropzone2.processQueue();
});

Answer 1

很可能在初始化 dropzone 元素之前没有设置变量max_photos，您可以反过来处理它，初始化 dropzone 然后设置maxFiles选项。

Dropzone.autoDiscover = false;

var myDropzone2 =  new Dropzone("div#add-photos-edit", {
  /*
   * Your configuration
   */
});

$('#add').on("click", function(e){

  var max_photos = $("#num_photos").val();
  max_photos = 5 - max_photos;
  $( "#add-photos" ).fadeIn();

  myDropzone2.options.maxFiles = max_photos;

});