Dropzone.js implémente la fonction de téléchargement par glisser-déposer de fichiers

dropzone.js est une bibliothèque JavaScript open source qui fournit une fonction de téléchargement de fichiers asynchrone AJAX, prend en charge le glisser-déposer de fichiers, prend en charge la taille maximale des fichiers, prend en charge la définition des types de fichiers, prend en charge la prévisualisation des résultats de téléchargement et ne s'appuie pas sur la bibliothèque jQuery.

En utilisant Dropzone

nous pouvons créer un formulaire de téléchargement formel et donner au formulaire une classe .dropzone.

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

De cette façon, Dropzone trouvera automatiquement l'élément de formulaire de .dropzone et le téléchargera sur le programme qui reçoit les fichiers en arrière-plan via l'attribut d'action, tel que télécharger .php, tout comme accepter un formulaire de saisie de fichier très ordinaire :

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

Ensuite, écrivez le code de téléchargement dans votre upload.php. Le site officiel de Dropzone télécharge uniquement le code js. , sans le code de téléchargement en arrière-plan. Cependant, helloweba.com vous fournit l'exemple de code de téléchargement complet de la version PHP. Vous êtes invités à télécharger le code source.

La prochaine étape consiste à introduire dropzone.js.

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

Ensuite, il n'y a rien à faire, il suffit d'ouvrir le navigateur et de tester l'effet de téléchargement par glisser-déposer. Bien sûr, vous pouvez écrire le style vous-même ou vous référer à notre exemple de code.

Il y a une autre situation, nous ne voulons pas avoir de formulaire dans le html téléchargé, alors bon, il suffit de placer un div #mydropzone dans le html

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

Ensuite, configurez l'appel js :

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

Si vous utilisez jquery, la version jQuery peut être appelée comme ceci :

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

Exécutez votre page Web et vous pourrez voir l'effet de téléchargement.

Configurer Dropzone

La particularité de Dropzone est qu'il est très flexible et propose de nombreuses options, événements, etc. Voici plusieurs éléments de configuration couramment utilisés dans Dropzone.

url : Le paramètre le plus important, indiquant à quelle page le fichier est soumis.

méthode : La valeur par défaut est post, qui peut être modifiée pour mettre si nécessaire.

paramName : équivalent à l'attribut name de l'élément , la valeur par défaut est file.

maxFilesize : taille maximale du fichier, l'unité est Mo.

maxFiles : La valeur par défaut est nulle et peut être spécifiée comme valeur pour limiter le nombre maximum de fichiers.

addRemoveLinks : faux par défaut. S'il est défini sur true, un lien de suppression sera ajouté au fichier.

acceptedFiles : indique les types de fichiers autorisés à être téléchargés. Le format est un type ou une extension MIME séparé par des virgules. Par exemple : image/*,application/pdf,.psd,.obj

uploadMultiple : indiquez si Dropzone est autorisé à soumettre plusieurs fichiers à la fois. La valeur par défaut est faux. Si la valeur est true, cela équivaut à ajouter plusieurs attributs aux formulaires HTML.

en-têtes : s'ils sont définis, ils seront envoyés au serveur sous forme d'informations d'en-tête supplémentaires. Par exemple : {"custom-header": "value">

init : une fonction appelée lorsque Dropzone est initialisée et peut être utilisée pour ajouter vos propres écouteurs d'événements.

forceFallback : Fallback est un mécanisme qui fournit une alternative lorsque le navigateur ne prend pas en charge ce plug-in. La valeur par défaut est faux. Si la valeur est true, force le repli.

fallback : Une fonction appelée si le navigateur ne prend pas en charge ce plug-in.

Ce qui précède est l'implémentation Dropzone.js du téléchargement par glisser-déposer de fichiers introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. à vous à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles liés à Dropzone.js implémentant la fonction de téléchargement de fichiers par glisser-déposer, veuillez faire attention au site Web PHP chinois !