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> |
