Dropzone.js in einem anderen PHP-Formular

Question

Trotz einiger Dokumentation gibt es nur sehr wenige Beispiele, wie man es benutzt.

Zum Beispiel: Ich möchte Dropzone in mein bestehendes Formular einfügen, das ein Produkt mit Titel, Beschreibung und Fotos hinzufügt.

Dropzone selbst funktioniert als Formular. Es wäre schön, Dropzone nur zur Vorschau und Validierung von Bildtyp und -größe zu verwenden, aber das Hauptformular sollte alle Daten übermitteln. Wie soll ich das machen?

Dies wäre die Idee (aber ich sollte nicht ein Formular in einem Formular enthalten):

<form action="products/add.php" method="POST" class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <legend>Add product</legend> 
    </div> 

    <label for="title">Title</label> 
    <input type="text" name="title" id="input-title" class="form-control"> 

    <label for="description">Description</label> 
    <input type="text" name="description" id="input-description" class="form-control"> 

    <form action="/file-upload" class="dropzone" id> 
     <div class="dropzone-previews"></div> 
    </form> 

    <div class="form-group"> 
     <div class="col-sm-10 col-sm-offset-2"> 
     <button type="submit" class="btn btn-primary">Submit</button> 
     </div> 
    </div> 
</form> 

Answer 1

Bitte versuchen Sie Folgendes. Sie müssen "load" Dropzone programmatisch als der Schöpfer here

\t Dropzone.autoDiscover = false; 
 
\t jQuery(document).ready(function() { 
 

 
\t $("div#my-awesome-dropzone").dropzone({ 
 
\t  url: "/file/post" 
 
\t }); 
 

 
\t });

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script> 
 

 

 
<form action="products/add.php" method="POST" class="form-horizontal" role="form"> 
 
    <div class="form-group"> 
 
    <legend>Add product</legend> 
 
    </div> 
 

 
    <label for="title">Title</label> 
 
    <input type="text" name="title" id="input-title" class="form-control"> 
 

 
    <label for="description">Description</label> 
 
    <input type="text" name="description" id="input-description" class="form-control"> 
 

 
    <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div> 
 

 
    <div class="form-group"> 
 
    <div class="col-sm-10 col-sm-offset-2"> 
 
     <button type="submit" class="btn btn-primary">Submit</button> 
 
    </div> 
 
    </div> 
 
</form>