So erstellen Sie benutzerdefinierte Vorschauvorlage in Dropzone js

Ich möchte wissen, wie Sie benutzerdefinierte Vorschauvorlage erstellen. Die Dokumentation erklärt nicht alles gut, und ich suchte nach Tutorial über Ich habe nichts gefunden.So erstellen Sie benutzerdefinierte Vorschauvorlage in Dropzone js

aktualisieren

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

Meine js

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

Quelle

2016-11-21 mohamed youssouf

Bitte erläutern mehr, was Sie erreichen wollen. Haben Sie bereits einen Beispielcode? Haben Sie die Erklärung bereits auf der Seite dropzone.js gesehen? http://www.dropzonejs.com/#Layout –

Überprüfen Sie Update auf meine Frage @ dns_nx –

Bitte beachten Sie mein Update. Ich denke, ich habe den Fehler gefunden. –

Für mich war es mit

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

aber ich denke, es sollte das gleiche sein wie die Verwendung html() Funktion in jQuery. Das einzige, was ich von Ihrem Code abweichend getan habe, war, die AutoErmittlung vorher auf "false" zu setzen. Vielleicht hilft dir das auch?

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

UPDATE

Jetzt denke ich, ich weiß, was in Ihrem Code falsch ist. Sie haben den Code für die Vorlage in die dropzone Div. Lege es nach draußen. Dann sollte es funktionieren.

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

Der Text für Ihren Sprungplatz Bereich anzuzeigen, die Sie während der Initialisierung die Dropzone einstellen:

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

Quelle

2016-11-21 13:21:50

So erstellen Sie benutzerdefinierte Vorschauvorlage in Dropzone js

Antwort

Verwandte Themen