如何重新定位dz-remove链接Dropzone.js

Question

在我下面的图片中,您可以看到我希望能够将删除文件链接的位置更改为内容div区域的外侧.

我尝试过自定义模板,没有运气.

问题如何在内容div区域外部删除文件按钮？而不是图像下方.

我只希望能够在不同的区域中删除图像链接

<div id="content">

    <div id="my-dropzone" class="dropzone">
        <span class="">Content Div Area</span>
        <div class="dz-message">
            <h3>Drop files here</h3> or <strong>click</strong> to upload
        </div>
    </div>

    <div class="dropzone_preview" id="dz-preview">
        <div class="dropzone_details">
            <img data-dz-thumbnail />
        </div>
        <a id="dz-remove" href="javascript:undefined;" data-dz-remove>Remove <-- here</a>
    </div>

</div>

<script src="<?php echo base_url(); ?>vendor/jquery/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>vendor/dropzone/dropzone.min.js"></script>

<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {

    url: "<?php echo site_url("images/upload") ?>",
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    thumbnailWidth: null,
    thumbnailHeight: null,
    addRemoveLinks: true,
    previewTemplate: document.getElementById('dz-preview').innerHTML,
    removedfile: function(file) {

    var name = file.name;

    $.ajax({
        type: "post",
        url: "<?php echo site_url("images/remove") ?>",
        data: { file: name },
        dataType: 'html'
    });

    var previewElement;
    return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0);
    },
    init: function() {
        this.on("thumbnail", function(file, dataUrl) {
            $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
        }),
        this.on("success", function(file) {
            $('.dz-image').css({"width":"100%", "height":"auto"});
        });
        var me = this;
        $.get("<?php echo site_url("images/list_files") ?>", function(data) {
            // if any files already in server show all here
            if (data.length > 0) {
                $.each(data, function(key, value) {
                var mockFile = value;
                me.emit("addedfile", mockFile);
                me.emit("thumbnail", mockFile, "<?php echo base_url(); ?>uploads/" + value.name);
                me.emit("complete", mockFile);
                });
            }
        });
    }
});
</script>

Answer 1

我不是 100% 确定，如果我理解正确的话，但不previewTemplate你的问题？

\n\n

看http://www.dropzonejs.com/#config-previewTemplate

\n\n

你可以这样做：\nHTML:

\n\n

<div id="preview-template" class="dz-preview dz-file-preview">\n  <div class="dz-details">\n    <div class="dz-filename"><span data-dz-name></span></div>\n    <div class="dz-size" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>\n  <div class="dz-success-mark"><span>\xe2\x9c\x94</span></div>\n  <div class="dz-error-mark"><span>\xe2\x9c\x98</span></div>\n  <div class="dz-error-message"><span data-dz-errormessage></span></div>\n <div><img src="removebutton.png" alt="Click me to remove the file." data-dz-remove /></div>\n</div>\n<div id="content">\n<div id="my-dropzone" class="dropzone">\n<div class="dz-message">\n<h3>Drop files here</h3> or <strong>click</strong> to upload\n</div>\n</div>\n</div>\n

\n\n

JS：

\n\n

<script>\nDropzone.autoDiscover = false;\nvar myDropzone = new Dropzone("#my-dropzone", {\n...,\npreviewTemplate: document.getElementById(\'preview-template\').innerHTML\n});\n</script>\n

\n\n

然后你可以修改CSS显示删除按钮的位置。

\n