jQuery 无法重新初始化 Dropzone.JS 对象

Question

我有这个代码：

<?php

$(document).ready(function(){

    var dropzone_maxfiles = '.$product_maxfiles.';

    $( ".product_imgfiles" ).click(function(event) {
        event.preventDefault();
        var img_file = $( this ).children( "img" ).attr( "src" );

        $.ajax({
            url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'&imgfile="+img_file+""
        });

        $( this ).parent( "div" ).remove();                 
        dropzone_maxfiles = dropzone_maxfiles + 1;

        var myDropzone = new Dropzone(".dropzone", { 
            url: "controller/ctrl.dropzonejs.php?token='.$product_token.'&key='.$secret_token.'",
            maxFilesize: 2,
            maxFiles: dropzone_maxfiles,
            acceptedFiles: ".jpeg, .jpg, .png, .gif"
        });
    });

    var myDropzone = new Dropzone(".dropzone", { 
        url: "controller/ctrl.dropzonejs.php?token='.$product_token.'&key='.$secret_token.'",
        maxFilesize: 2,
        maxFiles: '.$product_maxfiles.',
        acceptedFiles: ".jpeg, .jpg, .png, .gif"
    });

    myDropzone.on("complete", function() {
        var rejected = myDropzone.getRejectedFiles();

        if (rejected == "" ) {
            $(".btn-vendor-addnew").removeClass("disabled");
            $(".dropzone-error").css("display","none");
        } else {
            myDropzone.removeAllFiles(true);
            $(".btn-vendor-addnew").addClass("disabled");
            $(".dropzone-error").css("display","block");

            $.ajax({
                url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'"
            });
        }
    });

});

?>

问题是，myDropzone 对象总是使用 $(document).ready() 中的 var myDropzone = new Dropzone(".dropzone", {...}。甚至 .product_imgfiles 都被点击了。这使得 maxFiles 仍然使用旧值。如何使 myDropzone 对象在每次单击 .product_imgfiles 时都使用更新的值？

Answer 1

尝试设置myDropzone中选项值的值

$(document).ready(function() {

  var dropzone_maxfiles = '.$product_maxfiles.';

  $(".product_imgfiles").click(function(event) {
    event.preventDefault();
    var img_file = $(this).children("img").attr("src");

    $.ajax({
      url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'&imgfile=" + img_file + ""
    });

    $(this).parent("div").remove();
    dropzone_maxfiles = dropzone_maxfiles + 1;
    myDropzone.options.maxFiles = dropzone_maxfiles;

  });

  var myDropzone = new Dropzone(".dropzone", {
    url: "controller/ctrl.dropzonejs.php?token='.$product_token.'&key='.$secret_token.'",
    maxFilesize: 2,
    maxFiles: '.$product_maxfiles.',
    acceptedFiles: ".jpeg, .jpg, .png, .gif"
  });

  myDropzone.on("complete", function() {
    var rejected = myDropzone.getRejectedFiles();

    if (rejected == "") {
      $(".btn-vendor-addnew").removeClass("disabled");
      $(".dropzone-error").css("display", "none");
    } else {
      myDropzone.removeAllFiles(true);
      $(".btn-vendor-addnew").addClass("disabled");
      $(".dropzone-error").css("display", "block");

      $.ajax({
        url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'"
      });
    }
  });

});

jQuery 无法重新初始化 Dropzone.JS 对象

jQuery Failed to Reinitialised Dropzone.JS Object

jquery

dropzone.js