1 |
<!DOCTYPE HTML> |
2 |
<title>drop files</title> |
3 |
<style> |
4 |
#drop { |
5 |
border: blue 1px solid; |
6 |
height: 5em; |
7 |
} |
8 |
</style> |
9 |
|
10 |
<p id=drop>Drop files here |
11 |
|
12 |
<dl></dl> |
13 |
|
14 |
<script> |
15 |
var results = document.getElementsByTagName ('dl')[0]; |
16 |
var droparea = document.getElementById ('drop'); |
17 |
droparea.ondragenter = function () { return false }; |
18 |
droparea.ondragover = function () { return false }; |
19 |
droparea.ondrop = function (ev) { |
20 |
var files = ev.dataTransfer.files; |
21 |
results.innerHTML = ''; |
22 |
for (var i in files) { |
23 |
var dt = document.createElement ('dt'); |
24 |
var code = document.createElement ('code'); |
25 |
code.appendChild (document.createTextNode (i)); |
26 |
dt.appendChild (code); |
27 |
results.appendChild (dt); |
28 |
|
29 |
var dd = document.createElement ('dd'); |
30 |
var code = document.createElement ('code'); |
31 |
code.appendChild (document.createTextNode (files[i])); |
32 |
dd.appendChild (code); |
33 |
results.appendChild (dd); |
34 |
|
35 |
var dd = document.createElement ('dd'); |
36 |
var fdl = document.createElement ('dl'); |
37 |
dd.appendChild (fdl); |
38 |
results.appendChild (dd); |
39 |
var file = files[i]; |
40 |
for (var j in file) { |
41 |
var fdt = document.createElement ('dt'); |
42 |
var code = document.createElement ('code'); |
43 |
code.appendChild (document.createTextNode (j)); |
44 |
fdt.appendChild (code); |
45 |
fdl.appendChild (fdt); |
46 |
|
47 |
var fdd = document.createElement ('dd'); |
48 |
var code = document.createElement ('code'); |
49 |
code.appendChild (document.createTextNode(file[j])); |
50 |
fdd.appendChild (code); |
51 |
fdl.appendChild (fdd); |
52 |
} |
53 |
} |
54 |
}; |
55 |
</script> |