Bonjour,
je souhaiterai réaliser une interface web qui me permette d'uploader des image grace a un drag un drop, simplement.
Biensur j'ai effectuer des recherches assez poussez d'exemples en tout genre.

Mon idée est de me passer de jQuery, et de xhr, pour des raison qui me regarde et dont je ne debaterai pas ici

Mais je bloc sur un probleme.
Le code suivant, récupère un objet file lorsqu'un drag & drop est effectuer sur une petite div (#dropbox)
rien de bien sorcier
ensuite tout en js je créé une form, muni d'un input type file

Mais à ma grande surprise, input type file se montre bien mystérieux .
En effet assez naivement peut etre j'esperais qu'il me suffirai de placer mon objet récuperer précedement en value de mon input.
avec quelque chose comme ça :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
inputvar.setAttribute('value', file);
mais l'input type file ne se comporte pas comme ça. Et je ne comprend pas comment input type file classique fonctionne pour transmettre un fichier et le récuperer en PHP avec la super global $_FILE.

Bref si quelqu'un avait une idée, merci de m'éclairer.


voir le code complet :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script type="text/javascript">
window.onload = function() {
 
	var dropbox = document.getElementById("dropbox");
 
	dropbox.addEventListener("dragenter", dragenter, false);
	dropbox.addEventListener("dragover", dragover, false);
	dropbox.addEventListener("drop", drop, false);
	dropbox.addEventListener("drop", drop, false);
 
	function dragenter(e) {
	  e.stopPropagation();
	  e.preventDefault();
	}
 
	function dragover(e) {
	  e.stopPropagation();
	  e.preventDefault();
 
	  document.getElementById('dropbox').style.backgroundColor ='grey';
	} 
 
	function drop(e) {
	document.getElementById('dropbox').style.backgroundColor ='white';
 
	  e.stopPropagation();
	  e.preventDefault();
 
		var dt = e.dataTransfer;
		var files = dt.files;
 
		var form = document.createElement('form');
		form.setAttribute('method', 'post');
		form.setAttribute('action', 'upload.php');
		form.setAttribute('enctype','multipart/form-data');
 
		var inputvar = document.createElement('input');
		inputvar.setAttribute('type', 'file');
		inputvar.setAttribute('name', "my");
		/// inputvar.setAttribute('value', files); <--??? c'est là que ce pose mon problème comment faire passer l'objet file à l'input type file
 
		form.appendChild(inputvar);
		document.body.appendChild(form);
		form.submit();
	}
}
</script>