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是否可以在預覽中顯示文件名？

回答

相關問題