Dropzone -动态追加dropzone div不起作用

Question

由jquery动态追加的Dropzone不起作用。

我使用的所有dropzone的方法是有效的，但需要点击两次，然后才能工作，同时google chrome返回给我一个错误。

append dropzone代码：

$('.button').click(function () {
   $('.target').append("<div class='dropzone sales_proof_pic' data-proof-user-id='0'><div class='dz-message dropzone_placeholder color_khaki2' data-dz-message><span>UPLOAD<br>SALES<br>PROOF</span></div></div><input type='hidden' name='proof_id[0]' class='proof_pic_id'>");
});

方法代码：

$(document).on('click', '.sales_proof_pic', function() {
   var proof_pic = $(this);
   $(this).dropzone({
      url: 'url',
      acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
      maxFiles: 1,
      addRemoveLinks: true,
      sending: function(file, xhr, formData) {
         formData.append("_token", "{{ csrf_token() }}");
         formData.append("usage", "NOTICE");
      },
      init: function(){
         this.on("success", function(file, response) {
            file.previewElement.id = response;
            proof_pic.siblings('.proof_pic_id').val(response);
         });

         this.on("removedfile",function(file){
            var _ref;
            return (_ref = file.previewElement) != null ?
 _ref.parentNode.removeChild(file.previewElement) : void 0;
         });
      },
      removedfile: function(file) {
         var id = file.previewElement.id;
         $.ajax({
            type: 'GET',
            url: '/admin/assets/delete/'+id,
            success: function(response){
              proof_pic.siblings('.proof_pic_id').val("");
            }
         });
       }
   });
});

浏览器返回错误：

Uncaught Error: Dropzone already attached.
    at new c (dropzone.min.js:1)
    at HTMLDivElement.<anonymous> (dropzone.min.js:2)
    at Function.each (jquery.js:384)
    at m.fn.init.each (jquery.js:136)
    at m.fn.init.undefined.jQuery.fn.dropzone (dropzone.min.js:2)
    at HTMLDivElement.<anonymous> (create:355)
    at HTMLDocument.dispatch (jquery.js:4670)
    at HTMLDocument.r.handle (jquery.js:4338)

有什么办法可以解决这个问题吗？I不能删除var proof_pic = $(this);，因为我需要它来记录输入中的值

Answer 1

在…

$(this).dropzone({

您正在创建一个新的dropzone区域。将该行更改为

Dropzone.options.myDropZone = {

并指定"myDropZone“作为追加div的id，如下所示：

$('.button').click(function () {
   $('.target').append("<div id="myDropZone" name="myDropZone" class='dropzone sales_proof_pic' data-proof-user-id='0'><div class='dz-message dropzone_placeholder color_khaki2' data-dz-message><span>UPLOAD<br>SALES<br>PROOF</span></div></div><input type='hidden' name='proof_id[0]' class='proof_pic_id'>");
});

Answer 2

您需要断开默认情况下的自动need dropzone。

在您的Javascript document ready函数或load document中尝试此功能。

Dropzone.autoDiscover = false;

然后像这样声明dropzone。

 var $dropzone = new Dropzone('#dropzone', {
       *//all your settings here.*
    });

希望能有所帮助。