Question

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

我不是百分百肯定，如果我理解正确，但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进行修改，以显示删除按钮。

Answer 2

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

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

2 个答案: