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

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

来源

2016-12-26 doflamingo

您可以在任何情况下在其添加到预览元素取的文件名，这里是在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); 

     }); 
    } 
};

来源

2016-12-26 07:56:00 wallek876

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

来源

2017-08-22 08:16:08

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

回答

相关问题