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
quelle
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:
Erstellen Sie ein normales Formular (vergessen Sie nicht die Methoden- und Enctype-Argumente, da dies nicht mehr von dropzone behandelt wird).
Fügen Sie ein div mit dem
class="dropzone"
(so hängt Dropzone es an) undid="yourDropzoneName"
(wird zum Ändern der Optionen verwendet) ein.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).
Stellen Sie die Init-Funktion so ein, dass Dropzone anstelle des Standardverhaltens verwendet wird, wenn Sie auf die Schaltfläche "Senden" klicken.
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
JS
quelle
processQueue()
Anruf einzureichen ? Ich versuche zu verwendensubmit()
oderclick()
beide funktionieren nicht.$(":input[name]", $("form")).each(function () { formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val()); });
(Entschuldigung, ich weiß nicht, wie ich Zeilenumbrüche hierDie "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:
JQuery:
2) für die Serverseite:
ASP.Net MVC
quelle
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:
Dann das Skript-Tag ....
quelle
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:
zu dropzone.js nach dieser Zeile:
um die Linie 547.
quelle
Ich habe eine automatisiertere Lösung dafür.
HTML:
JavaScript:
Laravel:
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.
quelle
Sie können die formData ändern, indem Sie das Ereignis "Senden" aus Ihrer Dropzone abfangen.
quelle
Um alle Dateien zusammen mit anderen Formulardaten in einer einzigen Anfrage zu senden, können Sie die temporären versteckten
input
Knoten von Dropzone.j in Ihr Formular kopieren . Sie können dies imaddedfiles
Event-Handler tun :Dies ist offensichtlich eine Problemumgehung, die von den Implementierungsdetails abhängt. Zugehöriger Quellcode .
quelle
myDropzone.on("thumbnail", () => {})
Ereignis angeschlossen. Die sofortige Verarbeitung"addedFile"
der Datei erfolgt möglicherweise nochundefined
beim Zugriff.files[]
aber es ist leer, egal was ich tue. Irgendwelche Ideen? Mach es in Laravel, wenn es einen Unterschied macht.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.append
Option 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 Ihrenurl
Parameter 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
$_POST
oder$_FILES
einer 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]
quelle
Dies ist nur ein weiteres Beispiel dafür, wie Sie Dropzone.js in einem vorhandenen Formular verwenden können.
dropzone.js:
Dann, später in die Datei, die ich eingefügt habe
Dies setzt voraus, dass Sie ein Div mit einer ID haben. Auf
#botofform
diese 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 :)
quelle
Hier ist mein Beispiel, basiert auf Django + Dropzone. Ansicht hat auswählen (erforderlich) und senden.
quelle