wake-up-neo.net

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?

dropzone upload

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>  
16
Duc Manh Nguyen

Sie können Dropzone eine Vorlage zum Rendern der Bildvorschau sowie zusätzlicher Felder bereitstellen. In Ihrem Fall würde ich vorschlagen, die Standardvorlage zu verwenden oder eine eigene zu erstellen und einfach das Eingabefeld dort hinzuzufügen:

<div class="dz-preview dz-file-preview">
    <div class="dz-image"><img data-dz-thumbnail /></div>
    <div class="dz-details">
        <div class="dz-size"><span data-dz-size></span></div>
        <div class="dz-filename"><span data-dz-name></span></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <input type="text" placeholder="Title">
</div>

Die vollständige Standardvorlage für die Vorschau finden Sie im Quellcode von dropzone.js.


Anschließend können Sie Ihre benutzerdefinierte Vorlage einfach als Zeichenfolge für den previewTemplate-Schlüssel der Optionsparameter an Dropzone übergeben. Zum Beispiel:

var myDropzone = new Dropzone('#yourId', {
    previewTemplate: "..."
});

Solange Ihr Element ein Formular ist, enthält Dropzone automatisch alle Eingaben in den xhr-Anforderungsparametern.

11
Lalo Sánchez

Ich mache etwas ziemlich Ähnliches. Ich habe es erreicht, indem ich nur einen modalen Dialog mit jquery hinzugefügt habe, der geöffnet wird, wenn eine Datei hinzugefügt wird. Ich hoffe es hilft.

 this.on("addedfile", function() { 
   $("#dialog-form").dialog("open"); 
 });
4
Brandon Kindred

Diese ist in den Dokumenten versteckt, aber der Ort, an dem zusätzliche Daten hinzugefügt werden, befindet sich im Ereignis "Senden". Das sendende Ereignis wird unmittelbar vor dem Senden jeder Datei aufgerufen und ruft das xhr-Objekt und die formData-Objekte als zweiten und dritten Parameter ab, sodass Sie sie ändern können.

Grundsätzlich sollten Sie diese beiden zusätzlichen Parameter hinzufügen und dann die zusätzlichen Daten in der Funktion "Senden" oder in Ihrem Fall "Senden mehrerer" anhängen. Sie können jQuery oder einfach nur js verwenden, um die Werte abzurufen. Also sollte es ungefähr so ​​aussehen:

this.on("sendingmultiple", function(file, xhr, formData) {
      //Add additional data to the upload
      formData.append('username', $('#username').val());
      formData.append('password', $('#password').val());       
    });
3
nbarth

Ersetzen Sie in meiner Antwort mein Feld "Beschreibung" durch Ihr Feld "Titel".

Fügen Sie der Vorschau-Vorlage Eingabetext oder Textbereich hinzu. Zum Beispiel:

<div class="table table-striped files" id="previews">

  <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <input class="text" type="text" name="description" id="description" placeholder="Searchable Description">
    </div>  ... etc.
  </div>
</div>

Fügen Sie dann in der Sendefunktion die zugehörigen Daten an:

myDropzone.on("sending", function(file, xhr, formData) {

  // Get and pass description field data
    var str = file.previewElement.querySelector("#description").value;
    formData.append("description", str);
    ...
});

Empfangen Sie schließlich im Verarbeitungsskript, das den eigentlichen Upload ausführt, die Daten vom POST:

$description = (isset($_POST['description']) && ($_POST['description'] <> 'undefined')) ? $_POST['description'] : '';

Sie können jetzt Ihre Beschreibung (oder Titel oder was haben Sie) in einer Datenbank usw. speichern.

Ich hoffe, das funktioniert für Sie. Es war ein Waffensohn, um es herauszufinden.

2
TekBoss

Nun, ich habe eine Lösung für mich gefunden und deshalb werde ich sie aufschreiben, in der Hoffnung, dass sie auch anderen Menschen helfen könnte. Der grundlegende Ansatz besteht darin, eine neue Eingabe in den Vorschau-Container aufzunehmen und diese über die CSS-Klasse festzulegen, wenn die Dateidaten durch einen erfolgreichen Upload-Vorgang oder beim Initialisieren aus vorhandenen Dateien eingehen.

Sie müssen den folgenden Code in Ihren Code integrieren. Ich habe nur einige Zeilen übersprungen, die möglicherweise erforderlich sind, damit er funktioniert.

photowolke = {
    render_file:function(file)
    {
    caption = file.title == undefined ? "" : file.title;
    file.previewElement.getElementsByClassName("title")[0].value = caption;
    //change the name of the element even for sending with post later
    file.previewElement.getElementsByClassName("title")[0].id = file.id + '_title';
    file.previewElement.getElementsByClassName("title")[0].name = file.id + '_title';
    },
    init: function() {
        $(document).ready(function() {
            var previewNode = document.querySelector("#template");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);
            photowolke.myDropzone = new Dropzone("div#files_upload", {
                init: function() {
                    thisDropzone = this;
                    this.on("success", function(file, responseText) {
                        //just copy the title from the response of the server
                        file.title=responseText.photo_title;
                        //and call with the "new" file the renderer function
                        photowolke.render_file(file);
                    });
                    this.on("addedfile", function(file) {
                       photowolke.render_file(file);
                    });
                },
                previewTemplate: previewTemplate,
            });
            //this is for loading from a local json to show existing files
            $.each(photowolke.arr_photos, function(key, value) {
                var mockFile = {
                    name: value.name,
                    size: value.size,
                    title: value.title,
                    id: value.id,
                    owner_id: value.owner_id
                };
                photowolke.myDropzone.emit("addedfile", mockFile);
                // And optionally show the thumbnail of the file:
                photowolke.myDropzone.emit("thumbnail", mockFile, value.path);
                // Make sure that there is no progress bar, etc...
                photowolke.myDropzone.emit("complete", mockFile);
            });
        });
    },
};

Und da ist meine Vorlage für die Vorschau:

 <div class="dropzone-previews" id="files_upload" name="files_upload"> 
         <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail width="150" /></span>
    </div>
    <div>
    <input type="text" data-dz-title class="title" placeholder="title"/>

        <p class="name" data-dz-name></p><p class="size" data-dz-size></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div>

        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
    </div>


  </div>
0
rokdd

Für diejenigen, die die automatische Speicherung beibehalten und Daten senden möchten (z. B. eine ID oder etwas, das nicht vom Benutzer abhängt), können Sie "addedfile" einfach ein setTimeout hinzufügen:

myDropzone.on("addedfile", function(file) {
    setTimeout(function(){
        myDropzone.processQueue();
    }, 10);
});
0
Pierre F
$("#my-awesome-dropzone").dropzone({
    url: "Enter your url",
    uploadMultiple: true,
    autoProcessQueue: false,

    init: function () {
        let totalFiles = 0,
            completeFiles = 0;
        this.on("addedfile", function (file) {
            totalFiles += 1;
            localStorage.setItem('totalItem',totalFiles);
            caption = file.caption == undefined ? "" : file.caption;
            file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
            file._captionBox = Dropzone.createElement("<textarea rows='4' cols='15' id='"+file.filename+"' name='caption' value="+caption+" ></textarea>");
            file.previewElement.appendChild(file._captionLabel);
            file.previewElement.appendChild(file._captionBox);
            // this.autoProcessQueue = true;
        });
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            const myDropzone = Dropzone.forElement(".dropzone");
            myDropzone.processQueue();
        });
        this.on("sending", function(file, xhr, formData){
            console.log('total files is '+localStorage.getItem('totalItem'));
                formData.append('description[]',file._captionBox.value);
        })

    }
});
0
levis

Hier ist meine Lösung:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", { 
    url: 'yourUploader.php',
    init: function () {
        this.on(
            "addedfile", function(file) {
              caption = file.caption == undefined ? "" : file.caption;
              file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
              file._captionBox = Dropzone.createElement("<input id='"+file.filename+"' type='text' name='caption' value="+caption+" >");
              file.previewElement.appendChild(file._captionLabel);
              file.previewElement.appendChild(file._captionBox);
        }),
        this.on(
            "sending", function(file, xhr, formData){
            formData.append('yourPostName',file._captionBox.value);
        })
  }
});

yourUploader.php:

<?php 
  // Your Dropzone file named 
  $myfileinfo = $_POST['yourPostName'];
  // And your files in $_FILES
?>
0
Kerim İnceöz