So fügen Sie dem Dropzone-Upload Texteingaben hinzu

Ich möchte Benutzern erlauben, einen Titel für jede in Dropzone gezogene Datei zu übermitteln, die in eine Texteingabe eingegeben wird. Aber ich weiß nicht, wie ich es hinzufügen soll. Jeder kann mir helfen?

Dies ist mein HTML-Code Code

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

  <!-- Now setup your input fields -->
  <input type="email" name="username" id="username" />
  <input type="password" name="password" id="password" />

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

Und das ist mein Skriptcode

<script>
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

  // The configuration we've talked about above
  url: "upload.php",
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  maxFilesize:10,//MB

  // The setting up of the dropzone
  init: function() {
    var myDropzone = this;

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
      // Make sure that the form isn't actually being sent.
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.

    });
    this.on("successmultiple", function(files, response) {
      // Gets triggered when the files have successfully been sent.
      // Redirect user or notify of success.

    });
    this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error
    });
  },
  accept: function (file, done) {
        //maybe do something here for showing a dialog or adding the fields to the preview?
    },
 addRemoveLinks: true
}
</script>  

Antworten auf die Frage(6)

Ihre Antwort auf die Frage