Integrieren von Dropzone.js in vorhandene HTML-Formulare mit anderen Feldern

Ich habe derzeit ein HTML-Formular, in das Benutzer Details einer Anzeige eintragen, die sie veröffentlichen möchten. Ich möchte jetzt eine Dropzone hinzufügen können zum Hochladen von Bildern des zum Verkauf stehenden Artikels .

Ich habe Dropzone.js gefunden, das das meiste zu tun scheint, was ich brauche. Wenn Sie sich die Dokumentation ansehen, müssen Sie jedoch die Klasse des gesamten Formulars als angeben dropzone(im Gegensatz nur zum Eingabeelement ). Dies bedeutet dann, dass meine gesamte Form zur Dropzone wird .

Ist es möglich, die Dropzone nur in einem Teil meines Formulars zu verwenden, dh indem Sie das Element nur als Klasse "Dropzone" und nicht als das gesamte Formular angeben ?

Ich könnte separate Formulare verwenden, aber ich möchte, dass der Benutzer alles mit einer Schaltfläche senden kann.

Gibt es alternativ eine andere Bibliothek, die dies tun kann?

Danke vielmals

Hier ist eine andere Möglichkeit: divFügen Sie in Ihrem Formular eine Dropzone mit dem Klassennamen dropzone hinzu und implementieren Sie dropzone programmgesteuert.

HTML:

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

Hinweis: Deaktivieren Sie autoDiscover. Andernfalls versucht Dropzone zweimal, eine Verbindung herzustellen

Blog-Artikel : Dropzone js + Asp.net: Einfache Möglichkeit, Massenbilder hochzuladen

Ich hatte genau das gleiche Problem und stellte fest, dass Varan Sinayees Antwort die einzige war, die die ursprüngliche Frage tatsächlich löste. Diese Antwort kann jedoch vereinfacht werden. Hier ist eine einfachere Version.

Die Schritte sind:

1. Erstellen Sie ein normales Formular (vergessen Sie nicht die Methoden- und Enctype-Argumente, da dies nicht mehr von dropzone behandelt wird).

2. Fügen Sie ein div mit dem class="dropzone"(so hängt Dropzone es an) und id="yourDropzoneName"(wird zum Ändern der Optionen verwendet) ein.

3. Legen Sie die Dropzone-Optionen fest, um die URL festzulegen, unter der das Formular und die Dateien veröffentlicht werden sollen, deaktivieren Sie autoProcessQueue (dies geschieht nur, wenn der Benutzer auf "Senden" drückt) und lassen Sie mehrere Uploads zu (falls erforderlich).

4. Stellen Sie die Init-Funktion so ein, dass Dropzone anstelle des Standardverhaltens verwendet wird, wenn Sie auf die Schaltfläche "Senden" klicken.

5. Verwenden Sie noch in der Init-Funktion den Ereignishandler "sendmultiple", um die Formulardaten zusammen mit den Dateien zu senden.

Voilà! Sie können die Daten jetzt wie in einem normalen Formular in $ _POST und $ _FILES abrufen (im Beispiel würde dies in upload.php passieren).

HTML

<form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

JS

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}

Die "dropzone.js" ist die häufigste Bibliothek zum Hochladen von Bildern. Wenn Sie die "dropzone.js" nur als Teil Ihres Formulars haben möchten, sollten Sie die folgenden Schritte ausführen:

1) für den Kunden:

HTML:

    <form action="/" enctype="multipart/form-data" method="POST">
        <input type="text" id ="Username" name ="Username" />
        <div class="dropzone" id="my-dropzone" name="mainFileUploader">
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </div>
    </form>
    <div>
        <button type="submit" id="submit-all"> upload </button>
    </div>

JQuery:

    <script>
        Dropzone.options.myDropzone = {
            url: "/Account/Create",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",

            init: function () {

                var submitButton = document.querySelector("#submit-all");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on("addedfile", function (file) {

                    // Create the remove button
                    var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                    // Listen to the click event
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        wrapperThis.removeFile(file);
                        // If you want to the delete the file on the server as well,
                        // you can do the AJAX request here.
                    });

                    // Add the button to the file preview element.
                    file.previewElement.appendChild(removeButton);
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("Username", $("#Username").val());
                });
            }
        };
    </script>

2) für die Serverseite:

ASP.Net MVC

    [HttpPost]
    public ActionResult Create()
    {
        var postedUsername = Request.Form["Username"].ToString();
        foreach (var imageFile in Request.Files)
        {

        }

        return Json(new { status = true, Message = "Account created." });
    }

Enyos Tutorial ist ausgezeichnet.

Ich fand, dass das Beispielskript im Tutorial für eine in die Dropzone eingebettete Schaltfläche (dh das Formularelement) gut funktioniert. Wenn Sie die Schaltfläche außerhalb des Formularelements haben möchten, konnte ich dies mithilfe eines Klickereignisses erreichen:

Erstens das HTML:

<form id="my-awesome-dropzone" action="/upload" class="dropzone">  
    <div class="dropzone-previews"></div>
    <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
    </div>

</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

Dann das Skript-Tag ....

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

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,

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

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
    }
}

Zusätzlich zu den Aussagen von sqram verfügt Dropzone über eine zusätzliche undokumentierte Option, "hiddenInputContainer". Sie müssen diese Option lediglich auf die Auswahl des Formulars setzen, an das das ausgeblendete Dateifeld angehängt werden soll. Und voila! Das Dateifeld ".dz-hidden-input", das Dropzone normalerweise dem Körper hinzufügt, wird auf magische Weise in Ihr Formular verschoben. Keine Änderung des Dropzone-Quellcodes.

Während dies funktioniert, um das Dropzone-Dateifeld in Ihr Formular zu verschieben, hat das Feld keinen Namen. Sie müssen also hinzufügen:

_this.hiddenFileInput.setAttribute("name", "field_name[]");

zu dropzone.js nach dieser Zeile:

_this.hiddenFileInput = document.createElement("input");

um die Linie 547.

Ich habe eine automatisiertere Lösung dafür.

HTML:

<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
    {{ csrf_field() }}

    <!-- You can add extra form fields here -->

    <input hidden id="file" name="file"/>

    <!-- You can add extra form fields here -->

    <div class="dropzone dropzone-file-area" id="fileUpload">
        <div class="dz-default dz-message">
            <h3 class="sbold">Drop files here to upload</h3>
            <span>You can also click to open file browser</span>
        </div>
    </div>

    <!-- You can add extra form fields here -->

    <button type="submit">Submit</button>
</form>

JavaScript:

Dropzone.options.fileUpload = {
    url: 'blackHole.php',
    addRemoveLinks: true,
    accept: function(file) {
        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);
        fileReader.onloadend = function() {

            let content = fileReader.result;
            $('#file').val(content);
            file.previewElement.classList.add("dz-success");
        }
        file.previewElement.classList.add("dz-complete");
    }
}

Laravel:

// Get file content
$file = base64_decode(request('file'));

DropZone Discovery muss nicht deaktiviert werden, und die normale Formularübermittlung kann die Datei mit anderen Formularfeldern über die Standardformularserialisierung senden.

Dieser Mechanismus speichert den Dateiinhalt als base64-Zeichenfolge im ausgeblendeten Eingabefeld, wenn er verarbeitet wird. Sie können es in PHP mit der Standardmethode wieder in eine Binärzeichenfolge dekodieren base64_decode().

Ich weiß nicht, ob diese Methode bei großen Dateien beeinträchtigt wird, aber sie funktioniert mit ~ 40 MB-Dateien.

Sie können die formData ändern, indem Sie das Ereignis "Senden" aus Ihrer Dropzone abfangen.

dropZone.on('sending', function(data, xhr, formData){
        formData.append('fieldname', 'value');
});

Um alle Dateien zusammen mit anderen Formulardaten in einer einzigen Anfrage zu senden, können Sie die temporären versteckten inputKnoten von Dropzone.j in Ihr Formular kopieren . Sie können dies im addedfilesEvent-Handler tun :

var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
  // Input node with selected files. It will be removed from document shortly in order to
  // give user ability to choose another set of files.
  var usedInput = myDropzone.hiddenFileInput;
  // Append it to form after stack become empty, because if you append it earlier
  // it will be removed from its parent node by Dropzone.js.
  setTimeout(() => {
    // myForm - is form node that you want to submit.
    myForm.appendChild(usedInput);
    // Set some unique name in order to submit data.
    usedInput.name = "foo";
  }, 0);
});

Dies ist offensichtlich eine Problemumgehung, die von den Implementierungsdetails abhängt. Zugehöriger Quellcode .

Ich möchte hier eine Antwort einbringen, da auch ich mit demselben Problem konfrontiert bin. Wir möchten, dass das Element $ _FILES als Teil desselben Beitrags wie ein anderes Formular verfügbar ist. Meine Antwort basiert auf @mrtnmgs, bemerkt jedoch die Kommentare, die zu dieser Frage hinzugefügt wurden.

Erstens: Dropzone veröffentlicht seine Daten über Ajax

Nur weil Sie die formData.appendOption verwenden, bedeutet dies immer noch, dass Sie die UX-Aktionen angehen müssen - dh dies geschieht alles hinter den Kulissen und ist kein typischer Formularbeitrag. Daten werden in Ihren urlParameter gebucht .

Zweitens: Wenn Sie daher einen Formularbeitrag nachahmen möchten, müssen Sie die veröffentlichten Daten speichern

Dies erfordert serverseitigen Code zum Speichern Ihrer $_POSToder $_FILESeiner Sitzung, die dem Benutzer auf einer anderen Seite zur Verfügung steht, da der Benutzer nicht zu der Seite wechselt, auf der die veröffentlichten Daten empfangen werden.

Drittens: Sie müssen den Benutzer auf die Seite umleiten, auf der diese Daten verarbeitet werden

Nachdem Sie Ihre Daten veröffentlicht und in einer Sitzung gespeichert haben, müssen Sie sie für den Benutzer auf einer zusätzlichen Seite anzeigen / bearbeiten. Sie müssen den Benutzer auch auf diese Seite senden.

Also für mein Beispiel:

[Dropzone-Code: Verwendet Jquery]

$('#dropArea').dropzone({
    url:        base_url+'admin/saveProject',
    maxFiles:   1,
    uploadMultiple: false,
    autoProcessQueue:false,
    addRemoveLinks: true,
    init:       function(){
        dzClosure = this;

        $('#projectActionBtn').on('click',function(e) {
            dzClosure.processQueue(); /* My button isn't a submit */
        });

        // My project only has 1 file hence not sendingmultiple
        dzClosure.on('sending', function(data, xhr, formData) {
            $('#add_user input[type="text"],#add_user textarea').each(function(){
                formData.append($(this).attr('name'),$(this).val());
            })
        });

        dzClosure.on('complete',function(){
            window.location.href = base_url+'admin/saveProject';
        })
    },
});

Dies ist nur ein weiteres Beispiel dafür, wie Sie Dropzone.js in einem vorhandenen Formular verwenden können.

dropzone.js:

 init: function() {

   this.on("success", function(file, responseText) {
     //alert("HELLO ?" + responseText); 
     mylittlefix(responseText);
   });

   return noop;
 },

Dann, später in die Datei, die ich eingefügt habe

function mylittlefix(responseText) {
  $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}

Dies setzt voraus, dass Sie ein Div mit einer ID haben. Auf #botofformdiese Weise können Sie beim Hochladen die Namen der hochgeladenen Dateien verwenden.

Hinweis: Mein Upload-Skript hat die hochgeladene Dateiname.jpeg-Dubblenote zurückgegeben. Außerdem müssten Sie ein Bereinigungsskript erstellen, das das Upload-Verzeichnis auf nicht verwendete Dateien überprüft und diese löscht ..if in einer nicht authentifizierten Front-End-Form :)

Hier ist mein Beispiel, basiert auf Django + Dropzone. Ansicht hat auswählen (erforderlich) und senden.

<form action="/share/upload/" class="dropzone" id="uploadDropzone">
    {% csrf_token %}
        <select id="warehouse" required>
            <option value="">Select a warehouse</option>
                {% for warehouse in warehouses %}
                    <option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
                {% endfor %}
        </select>
    <button id="submit-upload btn" type="submit">upload</button>
</form>

<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    var filename = "";

    Dropzone.options.uploadDropzone = {
        paramName: "file",  // The name that will be used to transfer the file,
        maxFilesize: 250,   // MB
        autoProcessQueue: false,
        accept: function(file, done) {
            console.log(file.name);
            filename = file.name;
            done();    // !Very important
        },
        init: function() {
            var myDropzone = this,
            submitButton = document.querySelector("[type=submit]");

            submitButton.addEventListener('click', function(e) {
                var isValid = document.querySelector('#warehouse').reportValidity();
                e.preventDefault();
                e.stopPropagation();
                if (isValid)
                    myDropzone.processQueue();
            });

            this.on('sendingmultiple', function(data, xhr, formData) {
                formData.append("warehouse", jQuery("#warehouse option:selected").val());
            });
        }
    };
</script>