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

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

这是我的尝试，但不是工作

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

漫画标题：

章节：

提交数据和文件！

您可以在“将文件名添加到预览元素”中的任何事件中获取文件名，下面是

addedfile

事件中的一个示例：

js:

---

在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>`

`

<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>`