ondrop et preventDefault()

ToniConti · 11/08/2011, 00h49

Bonsoir à tous,

Une page contient un formulaire qui permet de poster une image.
Ça fonctionne mais pour plus de convivialité j'aimerais implémenter le drag and drop depuis le bureau.

Problème : lorsque je drop une image depuis le bureau, mon navigateur ouvre l'image au lieu d'exécuter ma fonction onDrop();

J'ai bien tenté de l'empêcher avec un e.preventDefault() mais rien n'y fait.

Voici la partie de mon code concernée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script language="javascript">
 
   function onDrop(e)
   {
	   e.preventDefault();
 
	   // Là je mettrai le code pour remplir correctement l'input.
	   fileLogo.value = .....
   }
 
 </script>
 
</head>
 
<body>
  <div class="dropZone" ondrop="onDrop(event)">
	<form id="formLogo" action="localhost/post_image.php" method="POST" enctype="multipart/form-data">
  	  <input id="fileLogo" type="file" name="image" onChange="formLogo.submit()">
	</form>
  </div>
</body>

Merci d'avance pour votre aide ou vos conseils
N'hésitez pas à me donner des liens vers de la doc pertinente sur le sujet.
(Please pas de plugins tout fait

)

Bonne soirée,

Anthony.

SpaceFrog · 05/09/2011, 10h02

le bureau est hors du bac à sable de javascript ...

zeclad01 · 05/09/2011, 10h13

Bonjour,

Je n'ai pas essayé, mais au vu des mes recherches il semblerait que ceci fonctionne :

http://code.google.com/p/dnd-file-upload/wiki/howto

ToniConti · 05/09/2011, 11h29

Bonjour zeclad01,

Merci pour ta réponse ce code me permet déjà d'empêcher le navigateur de changer de page :-)

Ce code est d'ailleurs sophistiqué et permet de faire bien plus que ce que j'essaye de faire ^^

Il va me falloir un peu de temps pour arriver à mes fins mais c'est un excellent début !

Merci

Sergejack · 05/09/2011, 11h35

Note bien que la solution proposé requiert l'emploi de plugins ou d'HTML 5.
Si tu souhaites touché un publique plus large n'oublie pas de proposer une méthode compatible alternative pour l'upload.

ToniConti · 05/09/2011, 14h37

Oui oui c'était justement l'idée, démonstration en image :

Pour les moins habiles ou ceux qui n'ont pas la bonne configuration, il y a toujours la possibilité de cliquer sur le bouton "parcourir".
Pour les plus chanceux, le drag&drop leur facilitera la vie :-)

Maintenant qu'il y a une image comme support, je re-précise que la seule chose que je souhaite faire lors du drag & drop
c'est de remplir mon composant <input type="file"/> comme si on l'avait fait en cliquant sur "parcourir"

J'imagine que pour quelqu'un qui maîtrise cela doit être possible en 2-3 lignes de code mais bon de nos jours on copie/colle des gros bazars tout fait de jquery malheureusement

Shikiryu · 06/09/2011, 11h33

http://www.sitepoint.com/html5-file-drag-and-drop/

Mais ça ne fonctionne pas sur tous les navigateurs.

SpaceFrog · 06/09/2011, 12h00

05/09/2011, 10h02	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 021 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 021 Points : 45 117 Points : 45 117	le bureau est hors du bac à sable de javascript ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

06/09/2011, 11h33	#7
Shikiryu Membre chevronné Développeur Web Inscription : mars 2011 Messages : 399 Détails du profil Informations personnelles : Sexe : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : Finance Informations forums : Inscription : mars 2011 Messages : 399 Points : 662 Points : 662	http://www.sitepoint.com/html5-file-drag-and-drop/ Mais ça ne fonctionne pas sur tous les navigateurs. __________________ Membre de StackOverflow, je suis un fervant utilisateur de PHP et de jQuery. Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web mais aussi plusieurs projets personnels. Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, un raccourcisseur d'url, un bookmarklet pour envoyer l'url de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc...
	00

05/09/2011, 10h13	#3
zeclad01 Membre régulier Étudiant Inscription : octobre 2010 Messages : 92 Détails du profil Informations professionnelles : Activité : Étudiant Informations forums : Inscription : octobre 2010 Messages : 92 Points : 78 Points : 78	Bonjour, Je n'ai pas essayé, mais au vu des mes recherches il semblerait que ceci fonctionne : http://code.google.com/p/dnd-file-upload/wiki/howto
	00

05/09/2011, 11h29	#4
ToniConti Membre régulier Inscription : novembre 2009 Messages : 231 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 231 Points : 90 Points : 90	Bonjour zeclad01, Merci pour ta réponse ce code me permet déjà d'empêcher le navigateur de changer de page :-) Ce code est d'ailleurs sophistiqué et permet de faire bien plus que ce que j'essaye de faire ^^ Il va me falloir un peu de temps pour arriver à mes fins mais c'est un excellent début ! Merci
	00

05/09/2011, 11h35	#5
Sergejack Membre chevronné Inscription : juillet 2006 Messages : 1 194 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 1 194 Points : 746 Points : 746	Note bien que la solution proposé requiert l'emploi de plugins ou d'HTML 5. Si tu souhaites touché un publique plus large n'oublie pas de proposer une méthode compatible alternative pour l'upload.
	00

05/09/2011, 14h37	#6
ToniConti Membre régulier Inscription : novembre 2009 Messages : 231 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 231 Points : 90 Points : 90	Oui oui c'était justement l'idée, démonstration en image : Pour les moins habiles ou ceux qui n'ont pas la bonne configuration, il y a toujours la possibilité de cliquer sur le bouton "parcourir". Pour les plus chanceux, le drag&drop leur facilitera la vie :-) Maintenant qu'il y a une image comme support, je re-précise que la seule chose que je souhaite faire lors du drag & drop c'est de remplir mon composant <input type="file"/> comme si on l'avait fait en cliquant sur "parcourir" J'imagine que pour quelqu'un qui maîtrise cela doit être possible en 2-3 lignes de code mais bon de nos jours on copie/colle des gros bazars tout fait de jquery malheureusement
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email