Dropzone.js implementiert die Drag-and-Drop-Upload-Funktion für Dateien

dropzone.js ist eine Open-Source-JavaScript-Bibliothek, die die AJAX-Funktion zum asynchronen Datei-Upload bietet, das Ziehen von Dateien unterstützt, die maximale Dateigröße unterstützt, das Festlegen von Dateitypen unterstützt, die Vorschau von Upload-Ergebnissen unterstützt und nicht auf die jQuery-Bibliothek angewiesen ist.

Mit Dropzone

können wir ein formelles Upload-Formular erstellen und dem Formular eine .dropzone-Klasse zuweisen.

<form id="mydropzone" action="/upload.php" class="dropzone"></form>

Auf diese Weise findet Dropzone automatisch das Formularelement von .dropzone und lädt es über das Aktionsattribut in das Programm hoch, das die Datei im Hintergrund empfängt, z als upload.php, genau wie beim Akzeptieren eines ganz gewöhnlichen Dateieingabeformulars:

<input type="file" name="file" />

Schreiben Sie dann den Upload-Code in Ihre upload.php. Die offizielle Website von Dropzone lädt nur herunter js-Code, ohne den Hintergrund-Upload-Code. helloweba.com stellt Ihnen jedoch den vollständigen Upload-Beispielcode der PHP-Version zur Verfügung.

Der nächste Schritt ist die Einführung von dropzone.js.

<script src="dropzone.min.js"></script>

Dann gibt es nichts mehr zu tun, öffnen Sie einfach den Browser und testen Sie den Drag-and-Drop-Upload-Effekt. Natürlich können Sie den Stil selbst schreiben oder auf unseren Beispielcode zurückgreifen.

Es gibt noch eine andere Situation: Wir möchten kein Formular im hochgeladenen HTML haben, also müssen wir nur ein Div #mydropzone im HTML platzieren

<div id="mydropzone" class="dropzone"></div>

Anschließend konfigurieren Sie den js-Aufruf:

var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});

Wenn Sie jquery verwenden, kann die jQuery-Version wie folgt aufgerufen werden:

$("#dropz").dropzone({
url: "upload.php"
})

Starten Sie Ihre Webseite und Sie können den Upload-Effekt sehen.

Dropzone konfigurieren

Das Merkmal von Dropzone ist, dass es sehr flexibel ist und viele Optionen, Ereignisse usw. bietet. Im Folgenden sind einige häufig verwendete Konfigurationselemente in Dropzone aufgeführt.

URL: Der wichtigste Parameter, der angibt, an welche Seite die Datei gesendet wird.

Methode: Die Standardeinstellung ist „Post“, die bei Bedarf in „Put“ geändert werden kann.

paramName: Entspricht dem Namensattribut des -Elements, der Standardwert ist file.

maxFilesize: Maximale Dateigröße, Einheit ist MB.

maxFiles: Der Standardwert ist null und kann als Wert angegeben werden, um die maximale Anzahl von Dateien zu begrenzen.

addRemoveLinks: Standardmäßig falsch. Wenn der Wert auf „true“ gesetzt ist, wird der Datei ein Löschlink hinzugefügt.

acceptedFiles: Gibt die Dateitypen an, die hochgeladen werden dürfen. Das Format ist ein durch Kommas getrennter MIME-Typ oder eine Erweiterung. Zum Beispiel: image/*,application/pdf,.psd,.obj

uploadMultiple: Geben Sie an, ob Dropzone mehrere Dateien gleichzeitig übermitteln darf. Der Standardwert ist falsch. Wenn es auf „true“ gesetzt ist, entspricht es dem Hinzufügen mehrerer Attribute zu HTML-Formularen.

Header: Wenn festgelegt, werden sie als zusätzliche Header-Informationen an den Server gesendet. Beispiel: {"custom-header": "value"}

init: eine Funktion, die bei der Initialisierung von Dropzone aufgerufen wird und zum Hinzufügen eigener Ereignis-Listener verwendet werden kann.

forceFallback: Fallback ist ein Mechanismus, der eine Alternative bietet, wenn der Browser dieses Plug-in nicht unterstützt. Der Standardwert ist falsch. Wenn auf „true“ gesetzt, Fallback erzwingen.

Fallback: Eine Funktion, die aufgerufen wird, wenn der Browser dieses Plug-in nicht unterstützt.

Das Obige ist die vom Herausgeber eingeführte Dropzone.js-Implementierung des Datei-Drag-and-Drop. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht pünktlich zu Ihnen. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zur Implementierung der Datei-Drag-and-Drop-Upload-Funktion in Dropzone.js finden Sie auf der chinesischen PHP-Website!