Dropzone.js एक और PHP फॉर्म

Question

के अंदर कुछ दस्तावेज होने के बावजूद, इसका उपयोग करने के तरीके पर बहुत कम वास्तविक उदाहरण हैं।

उदाहरण के लिए: मैं ड्रॉपज़ोन को अपने मौजूदा रूप में शामिल करना चाहता हूं जो शीर्षक, विवरण और फ़ोटो के साथ एक उत्पाद जोड़ता है।

ड्रॉपज़ोन स्वयं एक रूप के रूप में काम करता है। छवि प्रकार और आकार को पूर्वावलोकन और मान्य करने के लिए ड्रॉपज़ोन का उपयोग करना अच्छा होगा, लेकिन मुख्य फ़ॉर्म को सभी डेटा सबमिट करने दें। मैं इसे कैसे करूं?

<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

निम्नलिखित का प्रयास करें:

यह विचार (हालांकि, मैं एक फार्म के अंदर एक रूप शामिल नहीं होना चाहिए) होगा। प्रोग्राम के रूप में के रूप में निर्माता 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>