Créer une dropzone dans un form HTML
Fermé
romane_pm
Messages postés
4
Date d'inscription
jeudi 23 janvier 2020
Statut
Membre
Dernière intervention
24 janvier 2020
-
23 janv. 2020 à 18:22
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 24 janv. 2020 à 18:39
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 24 janv. 2020 à 18:39
A voir également:
- Html dropzone
- Image cliquable html ✓ - Forum Internet / Réseaux sociaux
- Html editor - Télécharger - HTML
- Télécharger html - Télécharger - HTML
- Br html ✓ - Forum Webmastering
- Espace en html - Astuces et Solutions
5 réponses
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
23 janv. 2020 à 20:50
23 janv. 2020 à 20:50
romane_pm
Messages postés
4
Date d'inscription
jeudi 23 janvier 2020
Statut
Membre
Dernière intervention
24 janvier 2020
23 janv. 2020 à 20:52
23 janv. 2020 à 20:52
Bonsoir,
J'ai vu ce lien et j'ai pu faire une dropzone, cependant la dropzone est faite avec un form, j'aimerai que la mienne soit inclue dans un form. J'ai essayé de mixé ça avec mon form mais cela m'a mis une dropzone sur toute la page, ce qui n'est pas vraiment le résultat souhaité je dois avouer... '^^
J'ai vu ce lien et j'ai pu faire une dropzone, cependant la dropzone est faite avec un form, j'aimerai que la mienne soit inclue dans un form. J'ai essayé de mixé ça avec mon form mais cela m'a mis une dropzone sur toute la page, ce qui n'est pas vraiment le résultat souhaité je dois avouer... '^^
romane_pm
Messages postés
4
Date d'inscription
jeudi 23 janvier 2020
Statut
Membre
Dernière intervention
24 janvier 2020
24 janv. 2020 à 11:57
24 janv. 2020 à 11:57
EDIT
pour l'instant j'ai essayé de faire ça
```
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="{{asset('dropZone.css')}}">
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone dz-clickable" >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
<button type="submit" id="submit-all"> upload </button>
</form>
<script src="dropzone.js">
Dropzone.options.myDropzone= {
url: {{path('ficheNC')}},
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 1,
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());
});
}
}
</script>
```
cependant cela ne fonctionne pas: la partie dropzone ne permet pas de mettre des photos dedans... J'ai aussi essayé en mettant
```
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST" class="dropzone dz-clickable" > et là la dropzone permet de
```
mettre des photos dedans mais celle ci fait la taille du form ce qui n'est pas ce que je veux....
Voila voila si quelqu'un peut m'aider.... Merci beacoup !
pour l'instant j'ai essayé de faire ça
```
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="{{asset('dropZone.css')}}">
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone dz-clickable" >
<div class="dz-default dz-message" aria-placeholder="">
<span>Drop files here to upload</span>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
</div>
</div>
<button type="submit" id="submit-all"> upload </button>
</form>
<script src="dropzone.js">
Dropzone.options.myDropzone= {
url: {{path('ficheNC')}},
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 1,
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());
});
}
}
</script>
```
cependant cela ne fonctionne pas: la partie dropzone ne permet pas de mettre des photos dedans... J'ai aussi essayé en mettant
```
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST" class="dropzone dz-clickable" > et là la dropzone permet de
```
mettre des photos dedans mais celle ci fait la taille du form ce qui n'est pas ce que je veux....
Voila voila si quelqu'un peut m'aider.... Merci beacoup !
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
Modifié le 24 janv. 2020 à 14:16
Modifié le 24 janv. 2020 à 14:16
Déjà.. merci de poster ton code en utilisant les BALISES DE CODE.
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite, normal que ça ne marche pas.
Tu as oublié un </script> et un <script>
Cordialement,
Jordane
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite, normal que ça ne marche pas.
Tu as oublié un </script> et un <script>
<script src="dropzone.js"></script>
<script>
Dropzone.options.myDropzone= {
url: {{pa
Cordialement,
Jordane
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
romane_pm
Messages postés
4
Date d'inscription
jeudi 23 janvier 2020
Statut
Membre
Dernière intervention
24 janvier 2020
24 janv. 2020 à 14:23
24 janv. 2020 à 14:23
Bonjour,
merci pour les balises, je n'avais pas vu où les trouver :)
Ensuite, je ne comprends pas votre réponse... je ne vois pas où j'ai oublié de balises script.
J'ai bien ma premiere
et ma deuxième qui est fermée où se trouve le code js...
merci pour les balises, je n'avais pas vu où les trouver :)
Ensuite, je ne comprends pas votre réponse... je ne vois pas où j'ai oublié de balises script.
J'ai bien ma premiere
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
et ma deuxième qui est fermée où se trouve le code js...
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
24 janv. 2020 à 18:39
24 janv. 2020 à 18:39
Toi tu as ça
Ce n'est pas vraiment la même chose que ce que je t'ai montré...
idem pour l'utilisation des balises de code il semble que tu n'aies pas lu complètement le lien...vu que tu as oublié d'y indiquer le langage ce qui ne permet pas d'avoir la coloration syntaxique...
<script src="dropzone.js">
Dropzone.options.myDropzone= {
url: {{path
Ce n'est pas vraiment la même chose que ce que je t'ai montré...
idem pour l'utilisation des balises de code il semble que tu n'aies pas lu complètement le lien...vu que tu as oublié d'y indiquer le langage ce qui ne permet pas d'avoir la coloration syntaxique...