使用 jQjuery 推送新元素时，Dropzone 不起作用答案

【问题标题】：Dropzone not works when push a new element with jQjuery使用 jQjuery 推送新元素时，Dropzone 不起作用
【发布时间】：2016-11-11 01:50:22
【问题描述】：

我有一个创建文章的表单。我使用 Dropzone 来管理上传文件。用户可能需要添加多个新的 Dropzone。因此，一切正常，但当我尝试通过 jQuery 推送更多 Dropzone 时接受。我认为 Dropzone 不会重新开始。

$('.btn-add').click(function (e) {
    e.preventDefault();
    var element = '';
    element = '<div class="article-item ui-state-default">'
    + '<div class="dropzone dropzone-previews multiple-upload>'
    + '</div>';
    ('#sortable').append(element);
});



Dropzone.autoDiscover = false;
   $('div.multiple-upload').dropzone({
        acceptedFiles : '.png, .gif, .jpg',
        dictCancelUpload : '',
        dictCancelUploadConfirmation : '',
        maxFilesize : 100,
        addRemoveLinks : true,
        init: function () {
             thisDropzone = this;
             var extractEle = thisDropzone.element.className;
             var extractClass = extractEle.split(' ');
             var obj = $('.' + extractClass[3]);
             var filename = $(obj).find('.media-item').val();
             var file_array = [];
             if (filename !== '') {
                 file_array = filename.split(',');
             }

             for (var index = 0; index < file_array.length; index++) {
                  var mockFile = {name: file_array[index], size: 75};
                  thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                  thisDropzone.options.thumbnail.call(thisDropzone, mockFile, BASE_URL + '/articles/' + file_array[index]);
             }
           },
           url: BASE_URL + '/writer/articles/upload'
 });

【问题讨论】：

我不确定你在问什么。您想在每次单击按钮时添加一个具有相同配置的新放置区吗？
是的，我是。那么你有什么想法吗？

标签： jquery dropzone.js

【解决方案1】：

如果你想在每次点击按钮时创建一个dropzone，那么你应该在点击事件中添加.dropzone()方法，对于你刚刚创建的div元素，你在var element字符串中有一些错误.

这里是一个例子：

$('.btn-add').click(function (e) {
    e.preventDefault();
    var element = '';
    element = '<div class="article-item ui-state-default">'
    + '<div class="dropzone dropzone-previews multiple-upload">'
    + '</div></div>';
    $('#sortable').append(element);


    $('div.multiple-upload').last().dropzone({
        acceptedFiles : '.png, .gif, .jpg',
        dictCancelUpload : '',
        dictCancelUploadConfirmation : '',
        maxFilesize : 100,
        addRemoveLinks : true,
        init: function () {
            thisDropzone = this;
            var extractEle = thisDropzone.element.className;
            var extractClass = extractEle.split(' ');
            var obj = $('.' + extractClass[3]);
            var filename = $(obj).find('.media-item').val();
            var file_array = [];
            if (filename !== '') {
                file_array = filename.split(',');
            }

            for (var index = 0; index < file_array.length; index++) {
                var mockFile = {name: file_array[index], size: 75};
                thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, BASE_URL + '/articles/' + file_array[index]);
            }
        },
        url: BASE_URL + '/writer/articles/upload'
    });
});

请注意，在这种特殊情况下，无需添加 Dropzone.autoDiscover = false，因为页面加载时没有任何 dropzone 元素。

【讨论】：