2016-03-19 3 views
0

ich Juse diesen Code für intragating Dropzone in einer normalen FormDropzone Form kommt in ganzen Körper.

Index.php

 <form id="my-awesome-dropzone" class="dropzone" action="upload.php"> 
      <div class="dropzone-previews"> </div> <!-- this is were the previews should be shown. --> 

      <!-- Now setup your input fields --> 
      <input type="text" name="Name" /> 
      <input type="text" name="Description" /> 

      <button type="submit">Submit data and files!</button> 

     </form> 

benutzerdefinierte Dropzone JS

Dropzone.options.myAwesomeDropzone = { 
    autoProcessQueue: false, 
     uploadMultiple: false, 
     parallelUploads: 100, 
      maxFiles: 100, 


    init: function() { 
var myDropzone = this; 


this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { 

    e.preventDefault(); 
    e.stopPropagation(); 
    myDropzone.processQueue(); 
}); 


this.on("sendingmultiple", function() { 
    alert("successfully"); 
}); 
this.on("successmultiple", function(files, response) { 
    alert("successfully"); 

}); 
this.on("errormultiple", function(files, response) { 
    alert("Error"); 

});}} 

Pls mir Hilfe Experte Bruder! Die Drop-Down-Form kommt mit der ganzen Form. was ich in diesem Code behoben werden muss.

Antwort

0

Ich habe die ganze Frage nicht verstanden, aber ich sehe nur wenige Probleme in Ihrem Code.

Im folgenden Schnipsel ich Ihren Code aktualisiert, um die Warnmeldungen zu sehen:

$(function() { 
 
    Dropzone.options.myAwesomeDropzone = { 
 
    previewsContainer: '.dropzone-previews', 
 
    autoProcessQueue: false, 
 
    uploadMultiple: false, 
 
    parallelUploads: 100, 
 
    maxFiles: 100, 
 
    init: function() { 
 
     var myDropzone = this; 
 

 
     this.element.querySelector("button[type=submit]").addEventListener("click", function (e) { 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     myDropzone.processQueue(); 
 
     }); 
 
    }, 
 
    sending: function(file, xhr, formData) { 
 
     alert('sending'); 
 
    }, 
 
    sendingmultiple: function (file, xhr, formData) { 
 
     alert("successfully"); 
 
    }, 
 
    successmultiple: function (file, xhr, formData) { 
 
     alert("successfully"); 
 

 
    }, 
 
    error: function (a, errorMessage, xhr) { 
 
     alert("Error"); 
 
    } 
 
    }; 
 
});
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script> 
 

 
<form id="my-awesome-dropzone" class="dropzone" action="upload.php"> 
 
    <div class="dropzone-previews"></div> 
 
    <!-- this is were the previews should be shown. --> 
 

 
    <!-- Now setup your input fields --> 
 
    <input type="text" name="Name"/> 
 
    <input type="text" name="Description"/> 
 

 
    <button type="submit">Submit data and files!</button> 
 

 
</form>

+0

Vielen Dank für Ihre wertvolle Zeit.! Ich sehe dein Snippet. Haben Sie die Option "drop files here to upload" oben rechts mit dem ganzen Formular angezeigt? Aber ich brauche es nur über den Feldern! Kannst du mir einen Vorschlag dafür geben? Bitte –

+0

@SaifMorshed Danke für den Kommentar. Um Ihnen zu helfen, muss ich verstehen, wonach Sie suchen. Es tut mir leid, aber ich kann dein "Aber ich brauche es nur über den Feldern!" Nicht verstehen. Könnten Sie so freundlich sein, dieses Problem zu klären? Nochmals vielen Dank – gaetanoM

+0

vielen Dank, dass Sie mir noch einmal antworten. "Aber ich brauche es nur über den Feldern!" Es bedeutet, ich möchte die Drag and Drop-Arbeit mit dem ganzen Körper sagen. Aber ich möchte nur einen Bereich bearbeiten, in dem ich zeigen möchte. Also ich möchte es über den Feldern anzeigen. –