it-swarm.com.de

So machen Sie nur die Dropzone.js Previews Div anklickbar und nicht das gesamte Formular

Ich muss das dropzone.js-Formular verwenden, das ein paar Eingaben und eine Datei-Upload-Info an die andere Seite sendet.

Mein Dropzone-Code sieht folgendermaßen aus -> 

Dropzone.options.mydropzone = {
  maxFiles: 1,
  maxFilesize: 10, //mb
  acceptedFiles: 'image/*',
  addRemoveLinks: true,
  autoProcessQueue: false,// used for stopping auto processing uploads
  autoDiscover: false,
  paramName: 'prod_pic',
  previewsContainer: '#dropzonePreview', //used for specifying the previews div
  clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box

  accept: function(file, done) {
    console.log("uploaded");
    done();
   //used for enabling the submit button if file exist 
    $( "#submitbtn" ).prop( "disabled", false );
  },

  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!Only One image file accepted.");
        this.removeFile(file);
    });
      var myDropzone = this;
    $("#submitbtn").on('click',function(e) {
       e.preventDefault();
       myDropzone.processQueue();

    });

       this.on("reset", function (file) {   
              //used for disabling the submit button if no file exist 
              $( "#submitbtn" ).prop( "disabled", true );
        });

  }

};

Ich möchte jedoch nur den Previews-Container sowohl für "Clickable" als auch für Drag & Drop festlegen, den ich mit previewsContainer: '#dropzonePreview', festgelegt habe, jedoch nicht das gesamte Formular.

Wenn ich clickable:false verwende, kann ich nicht auf Vorschaubilder klicken, um das Dialogfeld zum Hochladen von Dateien anzuzeigen, und auch, wenn ich die Datei irgendwo auf das Formular ziehe. Ich möchte nicht, dass dies geschieht. Ich möchte nur, dass der Previews-Container per Drag & Drop UND klickbar ist, aber gleichzeitig, wenn ich auf "Senden" klicke, muss das gesamte Formular hochgeladen werden.

Ich habe dieses Dropzone-Tutorial gelesen Kombiniere normale Form mit Dropzone aber das ist nur die Hälfte von dem, was ich eigentlich tun möchte.

Wie können wir all dies mit Dropzone effizient erreichen?.

13
Vishal Nair

Ich habe auch daran gearbeitet und bin schließlich über die Antwort auf der bootstrap - Seite gestolpert. 

Der Schlüssel legt die clickable:-Option dort fest, wo sich Ihr aktiver Dropzone-Bereich befinden soll. Wenn Sie in Ihrem Beispiel auch Ihren Vorschaubereich als Drop/Click-Bereich definieren möchten, legen Sie clickable:'#dropzonePreview', fest. Dadurch wird dieser Bereich aktiviert. Wenn Sie auch das Bild "Dateien ablegen" darin anzeigen möchten, verwenden Sie folgendes:

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

Auf diese Weise können Sie ein einzelnes Dropzone-Formular verwenden (dh alle Felder werden als eins übermittelt), während Sie weiterhin einen kleineren Bereich zum Ablegen/Klicken festlegen können.

Eine Anmerkung, machen Sie es jedoch nicht zu klein, als würden Sie es per Drag & Drop aus dem Bereich ziehen, in dem das Bild anstelle der Seite im Browser geladen wird.

21
ChaosTheory

Alternativ können Sie Dropzonen programmatisch (auch für Elemente ohne ) Erstellen, indem Sie die Dropzone-Klasse .__ instanziieren. http://www.dropzonejs.com/#toc_4

Sie müssen die dz-clickable -Klasse zum gewünschten Element hinzufügen.

HTML

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Drop files here to upload</span>
    </div>
</div>

JavaScript

// Dropzone class:
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

Hinweis

Wenn Sie eine Konsolenfehler-Fehlermeldung erhalten: Dropzone already attached, fügen Sie diese Zeile hinzu, bevor Sie Ihr neues Dropzone-Objekt initiieren.

Dropzone.autoDiscover = false;
11
Xhezairi

In der Dokumentation heißt es, die Option zu setzen: "klickbar: true", aber ...

Mein Problem war, dass ich sichtbare Markierungen im Upload-Formular (Box) hinzugefügt hatte. Wenn Sie möchten, dass jeder Punkt in dem Feld anklickbar ist, können Sie keine anderen sichtbaren Markierungen in Ihre Ansicht aufnehmen. Sie müssen sie der Option "dictDefaultMessage" hinzufügen.

0
Art P Vandelay