Question

我有一个表单来创建文章。我使用Dropzone来管理上传文件。用户可能需要添加多个新Dropzone。所以，当我试图通过jQuery推送更多Dropzone时，Everything正在工作但接受。我认为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'
 });

Answer 1

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

这是一个例子：

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元素。

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

1 个答案: