Upload un fichier sur un serveur
Bonjour,
j'essaie de créer un site internet où je pourrai envoyer des fichiers par "drag & drop" mais je n'y arrive pas. Serait-il possible que vous m'aidiez ?
Code:
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Upload</title>
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div class="dropzone" id="dropzone">Glissez le fichier que vous voulez upload sur le serveur</div>
<div id="uploads"></div>
<script>
(function dropzone(typeof !== 'undefined') {
var dropzone = document.getElementById('dropzone');
var displayUploads = function(data) {
var uploads = document.getElementById('uploads'),
anchor,
x;
for(x = 0; x < data.lenght; x = x +1) {
anchor = document.createElement('a');
anchor.href = data[x].file;
anchor.innerText = data[x].name;
uploads.appendChild(anchor);
}
}
var upload = function(files) {
var formData = new FormData(),
xhr = new XMLHttpRequest(),
x;
for(x = 0; x < files.lenght; x + 1) {
formData.append('file[]', files[x]);
}
xhr.onload = function() {
var data = this.responseText;
var data = JSON.parse(this.responseText);
displayUploads(data);
}
xhr.open('post', 'upload.php');
xhr.send(formData);
}
dropzone.ondrop(typeof dropzone.ondrop !== 'undefined') = function(e) {
e.preventDefault();
this.className = 'dropzone';
upload(e.dataTransfer.files);
};
drop.ondragover(typeof dropzone.ondragover !== 'undefined') = function() {
this.className = 'dropzone dragover';
return false;
};
drop.ondragleave(typeof dropzone.ondragleave !== 'undefined') = function() {
this.className = 'dropzone';
return false;
}
});
</script>
</body>
</html> |
Cordialement,
xxloubexx.
