dropzone.jsプレビューにファイル名を表示することはできますか？

Question

デフォルトでは、プレビュー状態では、画像プレビューでファイル名を確認する必要があります。 ファイル名をhoverzoneの外に置くことは可能ですか？これは私の試みですが、

<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：あなたのpreviewTemplateで

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

、この

のように使用します

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