web-dev-qa-db-fra.com

Comment créer un modèle de prévisualisation personnalisé dans dropzone js

Je veux savoir comment créer un modèle d'aperçu personnalisé. La documentation n’explique pas tout, et j’ai cherché un tutoriel pour ne rien trouver.

Mettre à jour

Mon html 

<div id="dropzone">
  <div id="template-preview">
    <img src="assets/images/icons/plus-icon-white.png" alt="" />
    <span>Choose or drop  file from your computer</span>
    <div class="dz-preview dz-file-preview well" id="dz-preview-template">
      <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
      </div>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
      <div class="dz-success-mark"><span></span></div>
      <div class="dz-error-mark"><span></span></div>
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
  </div>
</div>

Mon js

var drop = $('#dz-preview-template').html();
$('#dropzone').dropzone({
   url: "/upload",
   maxFilesize: 100,
   paramName: "uploadfile",
   maxThumbnailFilesize: 5,
   previewTemplate: drop,
   previewsContainer: "#template-preview"
});
javascriptdropzone.js
3
mohamed youssouf

Pour moi cela a fonctionné avec 

previewTemplate: document.getElementById('preview-template').innerHTML

mais je pense que cela devrait être la même chose que d'utiliser la fonction html() dans jQuery. La seule chose que j'ai faite différemment de votre code a été de définir l'autodiscover sur false auparavant. Peut-être que cela vous aide aussi? 

Dropzone.autoDiscover = false;
var uploadLogo = new Dropzone("div#uploadLogo", {
                                url: "../uploads/logo"
                                , method: "post"
                                ,...
                                ,previewTemplate: document.getElementById('preview-template').innerHTML
                                ,...
});

METTRE &AGRAVE; JOUR

Maintenant, je pense que je sais ce qui ne va pas dans votre code. Vous avez mis le code du modèle dans la variable dropzone div. Mets-le dehors. Alors ça devrait marcher.

<div id="dropzone"></div>
<div id="template-preview">
        <div class="dz-preview dz-file-preview well" id="dz-preview-template">
                <div class="dz-details">
                        <div class="dz-filename"><span data-dz-name></span></div>
                        <div class="dz-size" data-dz-size></div>
                </div>
                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                <div class="dz-success-mark"><span></span></div>
                <div class="dz-error-mark"><span></span></div>
                <div class="dz-error-message"><span data-dz-errormessage></span></div>
        </div>
</div>

Le texte à afficher pour votre zone de dépôt, vous pouvez définir lors de l’initialisation de la zone de dépôt:

$('#dropzone').dropzone({
                    ...
                    , dictDefaultMessage: "Choose or drop  file from your computer"
5
dns_nx

Pour la version 5.5.0 de dropzone.js, vous créez simplement un div avec l'id tpl , Puis placez le modèle à l'intérieur. Lorsque vous définissez dropzone, définissez-le comme suit: 

var myDropzone = new Dropzone("div#div_submit", 
   {  url: "mypage.aspx",
      previewTemplate : document.querySelector('#tpl').innerHTML });
0
Izle