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

Question

默认情况下，在预览状态下，我必须将鼠标悬停在图像预览上才能查看文件名。但是是否可以将文件名放在悬停区之外？ (见截图)

这是我的尝试，但不起作用

<form id="my-awesome-dropzone" class="dropzone" method="post" enctype="multipart/form-data" action="upload.php">
    <div class="dz-filename">
        <span data-dz-name></span>
    </div>
  <div class="dropzone-previews"></div> 


  Manga Title:<input type="text" name="title" />  <br>
  Chapter:<input type="text" name="chapter" /> <br>

  <button type="submit">Submit data and files!</button>
</form>

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);

        });
    }
};