Question

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

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

附加代码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)

有什么方法可以解决这个问题吗？我无法移除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

您需要分离默认情况下的automaticall dropzone。

从Javascript文档就绪功能或加载文档中尝试使用此功能。

Dropzone.autoDiscover = false;

并像这样声明放置区。

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

希望有帮助。

Dropzone - 动态附加dropzone div无法正常工作

2 个答案: