Dropzone.js wewnątrz innej postaci PHP

Question

Pomimo pewnych dokumentów, istnieje bardzo niewiele prawdziwych przykładów, jak z niego korzystać.

Na przykład: Chcę włączyć Dropzone do mojego istniejącego formularza, który dodaje produkt z tytułem, opisem i zdjęciami.

Sam Dropzone działa jako formularz. Byłoby miło używać Dropzone tylko do podglądu i sprawdzania poprawności typu i rozmiaru obrazu, ale pozwól, aby główny formularz przesłał wszystkie dane. Jak mam to zrobić?

Byłby to pomysł (jednak nie powinna obejmować formę wewnątrz formy):

<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

spróbuj wykonać następujące czynności. Trzeba "load" DropZone programowo jako twórca wyjaśnia 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>