Question

我一直在谷歌搜索并试图找到一个似乎几乎不可能的解决方案，我将dropzone集成到我的应用程序中，使用删除按钮，我想为每个拇指指甲添加一个额外的按钮这是可能的做？每个缩略图都有两个按钮？

Answer 1

我为代码

下面的每个文件检查添加了自定义下载按钮

var myDropzone = new Dropzone("#form", { 
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    dictRemoveFileConfirmation : 'Sure Want To Delete',
    init: function() {
         this.on("success", function(file, responseText) {
                 var filename = file.name;
                 $('#form').append("<input type='hidden' data='"+filename+"' name='files[]' value='"+responseText+"'>");
          });
         this.on("complete",function(file){
                 var newNode = document.createElement('a');
                 newNode.className = 'btn btn-primary btn-xs downloadbtn';
                 newNode.href = "<?= SITE_URL.''.'upload/attachments/' ?>"+file.name;
                 newNode.target = "_blank";
                 newNode.innerHTML = '<i class="fa fa-download"></i> Download';
                 file.previewTemplate.appendChild(newNode);

            });
    }
});

Answer 2

您是否为缩略图创建自定义主题？这是添加按钮等的最简单方法。http://www.dropzonejs.com/#theming

例如：

<div id="preview-template" style="display:none">
<div class="documents_drop_file_thumb">
    <div class="documents_drop_file_thumb_remove"><a class="dz-remove" href="javascript:undefined;" data-dz-remove=""><img src="<?php echo DIRECTORY_INDEX . "/"; ?>images/remove_file.png" alt=""></a></div>
    <div class="documents_drop_file_thumb_EXTRABUTTON"><a class="dz-extraaction" href="javascript:undefined;"><img src="<?php echo DIRECTORY_INDEX . "/"; ?>images/extrabutton_file.png" alt=""></a></div>
    <div class="documents_drop_file_thumb_image"><img data-dz-thumbnail /></div>
    <div class="documents_drop_file_thumb_progress_status"><span data-dz-name></span></div>
    <div class="documents_drop_file_thumb_progress"><span class="dz-upload" data-dz-uploadprogress></div>
    <div class="documents_drop_file_thumb_progress_status"><span data-dz-errormessage></span></div>
</div>

然后，在设置dz时，您只需要一个dropzone参数。

    //Prepare the drop zone area
var myNewdDropzone = new Dropzone("#idOfForm",  {
    url: "my-ajax.php",
    method: "POST",
    addRemoveLinks: false,
    clickable: true,
    previewTemplate: document.querySelector('#preview-template').innerHTML,
    init : function() {
        this.on("addedfile", function(file) { new_file_added(file); });
        this.on("thumbnail", function(file,fileurl) { new_thumbnail_added(file); });
        this.on("removedfile", function(file) { new_file_removed(file); });
        this.on("totaluploadprogress", function(progress) { display_progress(progress); });
        this.on("queuecomplete", function() { all_files_uploaded(); });
        //this.on("processing", function(file) { new_file_processed(file); });
    }
});

特别注意：

EXTRABUTTON - 这是你闪亮的新按钮区域

addRemoveLinks - 你的模板有它们，所以不要添加新的（带有一个漂亮的图标，假设你有一个带有该名称的漂亮图标）

previewTemplate - 设置新的缩略图模板

this.on（＆＃34; etcetcetc＆＃34;）调用由事件驱动的函数（如果需要）

向Dropzone添加自定义按钮

2 个答案: