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

【问题标题】：How to relocate the dz-remove link Dropzone.js如何重新定位 dz-remove 链接 Dropzone.js
【发布时间】：2016-11-16 08:36:31
【问题描述】：

在下面的图片中，如您所见，我希望能够将删除文件链接的位置更改为内容 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>

【问题讨论】：

标签： javascript jquery codeigniter dropzone.js

【解决方案1】：

我不能 100% 确定，如果我理解正确，但 previewTemplate 没有解决你的问题吗？

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

你做这样的事情： HTML：

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

JS：

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

然后你可以用CSS修改在哪里显示删除按钮。

【讨论】：

【解决方案2】：

只需删除选项参数addRemoveLinks: true,... 两次:-)

【讨论】：

【解决方案3】：

如果您想要一些特定的链接来删除文件（而不是内置的 addRemoveLinks 配置），您可以简单地使用 data-dz-remove 属性在模板中插入元素。示例：

<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />

您可以通过https://docs.dropzone.dev/configuration/basics/layout了解更多信息

【讨论】：