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
|
<html>
<body>
<div id="content"></div>
<p id="log" style="color: gray"></p>
<form enctype="multipart/form-data" action="uploader.php" method="POST">
<script>
// Content section used alot
var content = document.getElementById('content');
if (!window.FileReader) {
content.innerHTML = "<p>This browser doesnt support the File API</p>";
} else {
// Page Layout
content.innerHTML =
'<p>Drag and Drop le fichier<br> <input type="file" id="file" name="monfichier" /></p>' +
'<p><b>Name:</b> <span id="name" name="test"></span><br>' +
'<b>File Size:</b> <span id="size"></span><br>' +
'</p>';
// Prints out file properties.
function displayFile(file) {
document.getElementById('name').textContent = file.fileName;
document.getElementById('size').textContent = file.fileSize;
}
// Input handler
document.getElementById('file').onchange = function() {
displayFile(this.files[0]);
};
// Reduce movement by adding invisible border
content.style.border = '4px solid transparent';
// Add dragging events
content.ondragenter = function() {
content.style.border = '4px solid #b1ecb3';
return false;
};
content.ondragover = function() {
return false;
};
content.ondragleave = function() {
return false;
};
content.ondrop = function(event) {
content.style.border = '4px solid transparent';
displayFile(event.dataTransfer.files[0]);
return false;
};
}
</script>
</form>
</body>
</html> |
