首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何重新定位dz-删除链接Dropzone.js

问如何重新定位dz-删除链接Dropzone.js
EN

Stack Overflow用户
提问于 2016-11-16 08:36:31
回答 3查看 12K关注 0票数 5

在下面的图片中,如您所见,我希望能够将删除文件链接的位置更改为content区域的外侧。

我试过用自定义模板,没有运气。

问:如何在我的内容div区域的外侧有一个移除文件按钮?而不是下面的图像。

I只希望能够在不同的区域拥有删除图像链接()

​

​

代码语言:javascript
复制
<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>
EN

回答 3

Stack Overflow用户

发布于 2016-11-16 09:58:43

我不是百分之百肯定,如果我正确地理解你,但previewTemplate不解决你的问题吗?

请参阅http://www.dropzonejs.com/#config-previewTemplate

您可以这样做: HTML:

代码语言:javascript
复制
<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>

联署材料:

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

然后,您可以使用CSS修改显示删除按钮的位置。

票数 4
EN

Stack Overflow用户

发布于 2018-04-11 11:34:21

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

票数 0
EN

Stack Overflow用户

发布于 2022-01-29 13:23:17

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

代码语言:javascript
复制
<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />

您可以在https://docs.dropzone.dev/configuration/basics/layout上找到更多信息。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40627352

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档