dropzone.js是否可以在预览中显示文件名？

Question

默认情况下，在预览状态下，我必须将鼠标悬停在图像预览上以查看文件名。 但是可以将文件名放在hoverzone之外吗？ （见截图）

这是我的尝试，但没有工作

Dictionary<String: Int>

Answer 1

您可以在任何情况下将文件名添加到预览元素中，以下是addedfile事件中的示例：

JS：

Dropzone.options.myAwesomeDropzone = {

    init: function() {

        this.on('addedfile', function(file){

            var preview = document.getElementsByClassName('dz-preview');
            preview = preview[preview.length - 1];

            var imageName = document.createElement('span');
            imageName.innerHTML = file.name;

            preview.insertBefore(imageName, preview.firstChild);

        });
    }
};

Answer 2

在您的previewTemplate中

，像这样使用

<div class="dz-preview dz-file-preview">
              <div class="dz-details">
               <div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div>
                <img data-dz-thumbnail style="height:100px;width:100px;"/>
                <div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div>
                <div class="dz-error-message"><span data-dz-errormessage></span></div>
                <div class="dz-details"> 
                 </div>
                <img src="assets/img/fileRemoveIcon.png" style="width: 40px;margin-top: -227px;margin-left: 70px;" alt="remove" data-dz-remove />

                </div>
            </div>`