DnD upload d'image (input type "file")
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:
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:
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> |
