ondrop et preventDefault()

**ToniConti** · 11/08/2011, 01h49

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, 11h02

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

**zeclad01** · 05/09/2011, 11h13

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, 12h29

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, 12h35

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, 15h37

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